v-for 也可以取整数。在这种情况下，它将重复多次模板。
例子
1 <div id="app"> 2 <span v-for="n in 10">{{ n }}</span> 3 </div> 4 <script> 5 new Vue({ 6 el:"#app", 7 }) 8 </script>
浏览器打开显示
如果想对这10个数进行过滤呢(只要偶数)
我们可以创建返回过滤的计算属性。
1 <html> 2 <head> 3 <title>Canvas tutorial</title> 4 <script src="vue.js"></script> 5 </head> 6 <body> 7 <div id="app"> 8 <span v-for="n in evenNumber">{{ n }}</span> 9 </div> 10 <script> 11 new Vue({ 12 el:"#app", 13 data:{ 14 numbers:[1,2,3,4,5,6,7,8,9,10] 15 }, 16 computed:{ 17 evenNumber:function(){ 18 return this.numbers.filter(function(number){ 19 return number % 2 === 0; 20 }) 21 } 22 } 23 }) 24 25 </script> 26 </body> 27 </html>
浏览器显示:
我们也可以用methods方法来写
1 <html> 2 <head> 3 <title>Canvas tutorial</title> 4 <script src="vue.js"></script> 5 </head> 6 <body> 7 <div id="app"> 8 <span v-for="n in evenNumber(evenNumber)">{{ n }}</span> 9 </div> 10 <script> 11 new Vue({ 12 el:"#app", 13 data:{ 14 numbers:[1,2,3,4,5,6,7,8,9,10] 15 }, 16 methods:{ 17 evenNumber:function(){ 18 return this.numbers.filter(function(number){ 19 return number % 2 === 0; 20 }) 21 } 22 } 23 }) 24 </script> 25 </body> 26 </html>