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

【问题标题】：Take v-model value and create loop with v-for获取 v-model 值并使用 v-for 创建循环
【发布时间】：2019-06-08 06:04:16
【问题描述】：

我有一个输入字段。该字段包含数字。我想取这个数字并将这个数字与 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>

【问题讨论】：

试试 v-model.number vuejs.org/v2/guide/forms.html#number

标签： javascript html vue.js vuejs2

【解决方案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>

【讨论】：

正如 Emīls Gulbis 在主要 cmets 中指出的那样，让 Vue 自动将输入类型转换为数字是更好的解决方案，并且可以节省编写大量代码。
确实如此。我不知道那个 vue 实现。
也许我应该编辑这篇文章，以防有人偶然发现它会给他们正确的答案。有些人不阅读 cmets，他们只是通过答案。
当然。既然埃米尔斯没有把它放在答案中，你也可以。