vue.js的v-for指令

v-for 能干嘛？

1.迭代普通数组
2.迭代对象数组
3.迭代对象
4.迭代数字

使用 v-for 时必须添加唯一的 :key

》》key 使用说明代码《《

• 说明： ⬇⬇========================================⬇⬇
• 遍历数组或元素中的唯一标识，增加或删减元素时，通过这个唯一标识key判断是否是之前的元素，并且该元素key的值是多少。这个唯一标识是保持不变的
• 列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素
• 注意事项： ⬇⬇=====================================⬇⬇
• 在使用v-for的时候，vue里面需要我们给元素添加一个key属性，这个key属性必须是唯一的标识
• 给key赋值的内容不能是可变的
• key的主要作用就是用来提高渲染性能的！

1. 迭代普通数组

/*------------------html---------------------------*/

  <p v-for="(item,i) in dataList">每一项：{{item}} 索引值：{{i}}</p>

/*-------------------js--------------------------*/

data:{
	dataList:[1,2,3,4,5,6]
}

结果展示：

2. 迭代对象数组

/*------------------html---------------------------*/

    <p v-for="(user,i) in obj">--id: {{user.id}} 姓名: {{user.username}}</p>
    
/*-------------------js--------------------------*/

	data:{
        obj:[
            {id:1,username:"张三"},
            {id:2,username:"李四"},
            {id:3,username:"王五"},
            {id:4,username:"赵六"},
        ]
	}

结果展示：

3. 迭代对象

/*------------------html---------------------------*/

    <p v-for="(val,key) in obj">键：{{key}} 值：{{val}}</p>
    
/*-------------------js--------------------------*/

	data:{
        obj:{
            id:1,
            name:"张三",
            age:18,
        }
	},

结果展示：

4. 迭代数字

/*------------------html---------------------------*/

<p v-for="count in 10">这是第{{count}}次循环</p>

/*-------------------js--------------------------*/
  //无

结果展示：

:key 使用说明

以下借鉴 https://segmentfault.com/a/1190000013810844

初始码：

//html:
<div v-for="(item, index) in list" :key="index" >{{item.name}}</div>

//js
const list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
]

开始修改数据：在中间插入一条数据

const list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 4,
        name: '我是插队的那条数据',
    }
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
]

没有加 key 修改显示结果：

之前的数据                         之后的数据

key: 0  index: 0 name: test1     key: 0  index: 0 name: test1
key: 1  index: 1 name: test2     key: 1  index: 1 name: 我是插队的那条数据
key: 2  index: 2 name: test3     key: 2  index: 2 name: test2
                                 key: 3  index: 3 name: test3

加 key 修改后显示结果：

之前的数据                               之后的数据

key: 1  id: 1 index: 0 name: test1     key: 1  id: 1 index: 0  name: test1
key: 2  id: 2 index: 1 name: test2     key: 4  id: 4 index: 1  name: 我是插队的那条数据
key: 3  id: 3 index: 2 name: test3     key: 2  id: 2 index: 2  name: test2
                                       key: 3  id: 3 index: 3  name: test3