[英]Take v-model value and create loop with 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
返回你输入的任何字符串。
使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.