08 vue中的循环遍历及数组的补充

您所在的位置:网站首页 vue循环遍历数组flex 08 vue中的循环遍历及数组的补充

08 vue中的循环遍历及数组的补充

2024-07-13 23:07| 来源: 网络整理| 查看: 265

循环遍历 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