Vue中使用v-for和filter来过滤数据 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Vue-Computed计算属性</title>
 6         <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
 7         <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.0/index.js"></script>
 8         <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.0/theme-chalk/index.css" rel="stylesheet">
 9     </head>
10     <body>
11         <div id="app">
12             <!-- v-for中的可以使用计算属性来过滤数据 -->
13             <ul>
14                 <li v-for="n in evenNumbers">{{ n }}</li>
15             </ul>
16             
17             <!-- 双层v-for不可以用计算属性，但是可以用一个方法来过滤 -->
18             <ul v-for="set in sets">
19               <li v-for="n in even(set)">{{ n }}</li>
20             </ul>
21         </div>
22         <script>
23             var vm = new Vue({
24                 el: '#app',
25                 data: {
26                     numbers: [ 1, 2, 3, 4, 5 ],
27                     sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
28                 },
29                 computed:{
30                     evenNumbers(){
31                         return this.numbers.filter((number) => {
32                           return number % 2 === 0
33                         })
34                       }
35                 },
36                 methods:{
37                     even(arr_num){
38                         return arr_num.filter(function (number) {
39                             return number % 2 === 0
40                         })
41                     }
42                 }
43             })
44         </script>
45     </body>
46 </html>

 

posted @ 2020-09-21 17:41  yw3692582  阅读(9361)  评论(0)    收藏  举报