Vue列表渲染:一个取值范围的v-for

最新推荐文章于 2024-09-13 09:57:12 发布

weixin_34128411

最新推荐文章于 2024-09-13 09:57:12 发布

阅读量1.7k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qjuly/p/8589798.html

版权

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>