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

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会将您输入的任何内容都返回为字符串。

usingv-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>