·准备一个数组，根据数组数据创建列表。

·要求：当数据大于10时创建li，否则不创建。

·思考以下三种实现方式：

·v-if与v-for结合

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> </head> <body> <div id=“app”> <ul> <li v-if=“item > 10” v-for=“item in arr”>{{ item }}</li> </ul> </div> <script src=“lib/vue.js”></script> <script> var vm = new Vue({ el: ‘#app’, data: { arr: [1, 11, 2, 22, 3, 33, 4, 44, 5, 55] } }); </script> </body> </html>

·v-for与methods结合

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> </head> <body> <div id=“app”> <ul> <li v-for=“item in fn()”>{{ item }}</li> </ul> <ul> <li v-for=“item in fn()”>{{ item }}</li> </ul> </div> <script src=“lib/vue.js”></script> <script> var vm = new Vue({ el: ‘#app’, data: { arr: [1, 11, 2, 22, 3, 33, 4, 44, 5, 55] }, methods: { fn () { console.log(‘函数代码执行了’); // 遍历 arr ，找到大于 10 的数据 var resultArr = []; for (var i = 0; i < this.arr.length; i++) { if (this.arr[i] > 10) { resultArr.push(this.arr[i]) } } return resultArr; } } }); </script> </body> </html>

·v-for 与计算属性结合

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> </head> <body> <div id=“app”> <ul> <li v-for=“item in result”>{{ item }}</li> </ul> <ul> <li v-for=“item in result”>{{ item }}</li> </ul> </div> <script src=“lib/vue.js”></script> <script> var vm = new Vue({ el: ‘#app’, data: { arr: [1, 11, 2, 22, 3, 33, 4, 44, 5, 55] }, computed: { result () { console.log(‘执行了代码’); return this.arr.filter(item => item > 10); } } }); </script> </body> </html>