javascript - 获取 v-model 值并使用 v-for 创建循环
问题描述
我有一个输入字段。该字段包含数字。我想取这个数字并将这个数字与 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
会将您输入的任何内容都返回为字符串。
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>
推荐阅读
- javascript - chart.js - 工具提示回调函数在取消选择图例时忽略隐藏的数据集
- text-to-speech - Linux 中的离线波兰语 TextToSpeech
- sql - 计算每个月的实际工作日
- python - 如何解决EOFError:读取一行时的EOF?
- php - 我怎样才能把一些css放在一个select stmt中?
- sql - 如何在 MS SQL Server Mangement Studio 中访问“ID”
- magento - 如果有人在 Magento 2 中向卡片添加项目时选择了特定属性,则从库存中扣除
- azure-active-directory - B2B 邀请兑换页面的密码复杂性问题
- javascript - 我无法选择 fabric.js 对象
- arduino - Arduino和Nodemcu之间的串行通信