ArcherWong博客
首页
博客
vue笔记4-vue列表渲染
作者:ArcherWong
分类:vue
时间:2019-01-03 21:38:16
阅读:301
[TOC] # 1. v-for ## 1.1 遍历数组 ``` //item=>值,index=>索引 <ul id="example-2"> <li v-for="(item, index) in items"> {{ index }} - {{ item.message }} </li> </ul> ``` ``` var example2 = new Vue({ el: '#example-2', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) ``` ``` //结果 0-Foo 1-Bar ``` ## 1.2 遍历对象 ``` //完整模式,value=>值,key=>键名,index=>索引 <div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div> ``` ``` new Vue({ el: '#v-for-object', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } }) ``` ``` //结果 0.firstName:John 1.lastName:Doe 2.age:30 ``` ## 1.3 key 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略. 建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。 ``` <div v-for="item in items" :key="item.id"> <!-- 内容 --> </div> ``` # 2. 数组更新检测 ## 2.1 变异方法:使用这些方法会改变原始数组,并且会触发视图更新 - push() - pop() - shift() - unshift() - sort() - reverse() - splice() ``` //splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。 arrayObject.splice(index,howmany,item1,.....,itemX) //index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。 //howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。 //item1, ..., itemX 可选。向数组添加的新项目。 //例子 <script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" //操作 //1. arr.splice(2,0,"William") //2. arr.splice(2,1,"William") //3. arr.splice(2,3,"William") //arr结果 //1. George,John,William,Thomas,James,Adrew,Martin //在index=2位置添加william //2. George,John,William,James,Adrew,Martin //删除index=2的原有元素,添加新元素 //3. George,John,William,Martin //从index=2位置删除掉3个元素,再添加新元素 </script> ``` ## 2.2 非变异方法:不会改变原始数组,会返回一个新的数组。例如 - filter() - concat() ``` //简单理解为合并数组 var arr = [`大漠`,'30','W3cplus']; console.log(arr); // ["大漠", "30", "W3cplus"] var arr2 = arr.concat('Blog','2014'); console.log(arr2); // ["大漠", "30", "W3cplus", "Blog", "2014"] //同时传递一个或多个数组 var arr = ["大漠","30"]; console.log(arr); // ["大漠", "30"] var arr2 = arr.concat(1,["blog","w3cplus"],["a","b","c"]); console.log(arr2); // ["大漠", "30", 1, "blog", "w3cplus", "a", "b", "c"] //还可以传递空值,只是复制数组并返回一个副本 var arr = [1,2]; console.log(arr); // [1, 2] var arr2 = arr.concat(); console.log(arr2); // [1, 2] ``` - slice() ``` //slice() 方法可从已有的数组中返回选定的元素。 arrayObject.slice(start,end) //start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 //end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。 ``` 使用非变异方法,使用生成的新数组替换原数组不会导致 Vue 丢弃现有 DOM 并重新渲染整个列表,因为vue使用了一些智能启发式的方法。 ## 2.3 注意事项 由于 JavaScript 的限制,Vue 不能检测以下变动的数组: - 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 解决方法 ``` // 方法1 Vue.set Vue.set(example1.items, indexOfItem, newValue) // 方法2 Array.prototype.splice example1.items.splice(indexOfItem, 1, newValue) ``` - 当你修改数组的长度时,例如:vm.items.length = newLength 解决方法 ``` example1.items.splice(newLength) ``` ## 2.4 还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除: 还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除: ``` var vm = new Vue({ data: { a: 1 } }) // `vm.a` 现在是响应式的 vm.b = 2 // `vm.b` 不是响应式的 ``` 对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如,对于: ``` var vm = new Vue({ data: { userProfile: { name: 'Anika' } } }) ``` 你可以添加一个新的 age 属性到嵌套的 userProfile 对象: Vue.set(vm.userProfile, 'age', 27) 你还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名: vm.$set(this.userProfile, 'age', 27) 如果想复制多个属性 ``` this.userProfile = Object.assign({}, this.userProfile, { age: 27, favoriteColor: 'Vue Green' }) //Object.assign方法的第一个参数 (这里是'{}') 是目标对象,后面的参数都是源对象。 ``` ## 2.5 显示过滤/排序结果 有时,我们想要显示一个数组的过滤或排序副本,而不实际改变或重置原始数据。在这种情况下,可以创建返回过滤或排序数组的计算属性。 例如: ``` <li v-for="n in evenNumbers">{{ n }}</li> data: { numbers: [ 1, 2, 3, 4, 5 ] }, computed: { evenNumbers: function () { return this.numbers.filter(function (number) { return number % 2 === 0 }) } } ``` 在计算属性不适用的情况下 (例如,在嵌套 v-for 循环中) 你可以使用一个 method 方法: ``` <li v-for="n in even(numbers)">{{ n }}</li> data: { numbers: [ 1, 2, 3, 4, 5 ] }, methods: { even: function (numbers) { return numbers.filter(function (number) { return number % 2 === 0 }) } } ``` ## 2.6 v-for ``` <div> <span v-for="n in 10">{{ n }} </span> </div> //用在template上 <ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template> </ul> //用在组件上 <my-component v-for="item in items" :key="item.id"></my-component> ``` ## 2.7 v-for with v-if 当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时,这种优先级的机制会十分有用,如下: ``` <li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li> ``` 上面的代码只传递了未 complete 的 todos。 而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 `<template>`)上。如: ``` <ul v-if="todos.length"> <li v-for="todo in todos"> {{ todo }} </li> </ul> <p v-else>No todos left!</p> ```
标签:
上一篇:
vue笔记3-vue条件渲染
下一篇:
vue笔记6-事件处理
文章分类
css
elasticsearch
git
golang
guacamole
javascript
letsencrypt
linux
nginx
other
php
python
vue
web
阅读排行
golang笔记---关联数组(map)
centos7.3配置guacamole
letsencrypt证书-管理工具certbot
golang笔记---template模板语法
nginx笔记-proxy_cache缓存详解
友情链接
node文件
laravel-vue
ArcherWong的博客园