08 vue中的循环遍历及数组的补充 |
您所在的位置:网站首页 › vue循环遍历数组flex › 08 vue中的循环遍历及数组的补充 |
循环遍历
1、v-for遍历数组
{{item}}
const app = new vue({
el : "#app",
data : {
names : ['fdg','kobe','james','curry'],
},
})
在遍历过程中获取索引值: {{index+1}}.{{item}} const app = new vue({ el : "#app", data : { names : ['fdg','kobe','james','curry'], }, }) 2、v-for遍历对象在遍历对象的过程中,如果只获取一个值,那么获取到的是value(就是fdg、22、1.83) {{item}} const app = new vue({ el : "#app", data : { info : { name : "fdg", age : 22, height : 1.83, } }, })获取key和value 格式:(value,key) {{value}}-{{key}} const app = new vue({ el : "#app", data : { info : { name : "fdg", age : 22, height : 1.83, } }, })获取key和value和index 格式:(value,key,index) {{value}}-{{key}}-{{index}} const app = new vue({ el : "#app", data : { info : { name : "fdg", age : 22, height : 1.83, } }, })注:v-for的key属性 官方推荐我们在使用v-for时,给对应的元素或组件添加上一个:key属性。 为什么需要这个kry属性呢?这和vue的虚拟DOM的Diff算法有关系。 当某一层有很多相同的节点时,也就是列表节点时,我们希望插入一个新的节点。 如:数组里有A、B、C、D、E五个元素,我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的:把C更新成F,D更新成C,E更新成D,最后再插入E。 所以需要使用key来给每个节点做唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。 所以一句话,key的作用主要是为了高效的更新虚拟DOM 3、数组的补充 哪些数组的方法是响应式的(1)push()方法(可响应式) 该方法作用为往数组后面插入元素(letters为数组名) this.letters.push('aaa') //插入一个 this.letters.push('aaa','bbb','ccc') //插入多个(2)pop()方法(可响应式) 该方法作用为删除数组最后的一个元素。 this.letters.pop('aaa')(3)shift()方法(可响应式) 该方法作用为删除数组中第一个元素 this.letters.shift('aaa')(4)unshift()方法(可响应式) 该方法作用为在数组最前面添加元素 this.letters.unshift('aaa') //添加一个 this.letters.unshift('aaa','bbb','ccc') //添加多个(5)splice()方法(可响应式) 该方法作用:删除元素、插入元素、替换元素 splice()的参数: 第一个参数:splice(start):这个参数表明你要从哪个位置删除元素或者插入元素及替换元素。 第二个参数:如果是准备删除元素的话,传入要删除几个元素。如:splice(2,2) 就是从第二个开始,删除两个元素,如果不传第二个元素的话,会删除从第二个开始之后的所有元素。 this.letters.splice(2,2)如果是准备替换元素的话,后面要加上替换的元素。如:splice(2,2,‘a’,‘b’)。就是从第二个开始元素开始,替换两个,替换的结果为a,b。 this.letters.splice(2,2,'a','b')如果是插入元素的话,第二个元素写0,后面加上要添加的元素即可。如:splice(2,0,‘a’,‘b’,‘c’)。就是从第二个元素后面加入三个元素。 this.letters.splice(2,0,'a','b','c')(6)sort()方法(可响应式) 该方法作用:为数组中的所有元素排序 this.letters.sort()(6)reverse()方法(可响应式) 该方法作用:翻转数组中的所有元素 this.letters.reverse()==注:==通过索引值修改数组中的元素(不响应) this.letters[0] = 'aaa'补充:vue中的set方法 set(要修改的对象,索引值,修改后的值)。如下: Vue.set(this.letters,0,'aaaaa')作用为修改letters中下标为0的元素为aaaaa。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |