Question

我有一个输入字段。此字段包含数字。我想使用此数字，并将此数字用于for循环。

在我的示例中，输入字段内有数字5，我想写li五次。好的，这是工作！但是，当我将数字更改为10时，只写了10，就不再在循环内，也没有显示10次li循环。

如何使用v-for动态显示v-model值？

var app = new Vue({
  el:'#app',
  data: {
    uTopX: 5,
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <table>
    <tr>
      <td>
        <label for="uTopX">Top X</label>
      </td>
      <td>
        <input id="uTopX" v-model="uTopX" type="number">
      </td>
    </tr>
  </table>


  <ul>
    <li v-for="n in uTopX">
      {{n}}
    </li>
  </ul>
</div>

Answer 1

问题是v-model返回您输入的任何字符串。

使用v-model.number是最简单的解决方案。

var app = new Vue({
  el:'#app',
  data: {
      uTopX: 5,
  }

});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <table>
    <tr>
      <td>
        <label for="uTopX">Top X</label>
      </td>
      <td>
        <input id="uTopX" v-model.number="uTopX" type="number">
      </td>
    </tr>
  </table>


  <ul>
    <li v-for="n in uTopX">
      {{n}}
    </li>
  </ul>
</div>

获取v-model值并使用v-for创建循环

1 个答案: