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>