vue学习笔记（一） ---- vue指令（v-for 和 key 属性）

Vue.js教程：v-for与key属性详解

最新推荐文章于 2022-06-04 13:44:56 发布

原创最新推荐文章于 2022-06-04 13:44:56 发布 · 494 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue学习笔记专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了Vue.js中的v-for指令，包括如何遍历数组、数组对象以及数值，并展示了如何在v-for中使用index获取索引。同时，文章探讨了在动态添加元素时，由于Vue不跟踪状态导致的问题，以及解决方案——使用key属性来保持元素状态。通过实例解释了key属性的重要性，建议在使用v-for时为每个元素绑定key。

vue指令之`v-for`和`key`属性

一、 `v-for`

1. `v-for`循环数组

<div id="app">
    <h3>好饿，我好想吃~~~~</h3>
    <ul v-for="menu in list">
        <li>{{menu}}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list:['鸭血粉丝','螺蛳粉','大碗米线','黄焖鸡','地锅鸡']
        }
    })
</script>

来吧展示:

在这里插入图片描述
如果需要索引,则给v-for传入一个参数,index表示的是索引(名称任意取)

<div id="app">
    <h3>好饿，我好想吃~~~~</h3>
    <ul v-for="(menu,index) in list">
        <li>安排一下啵：{{index}}--------{{menu}}</li>
    </ul>
</div>

2. `v-for`循环数组对象 01

在这里插入图片描述
传入多个对象:

<div id="app">
    <h3>好饿，我好想吃~~~~</h3>
<!--    <ul v-for="(menu,index) in list">-->
<!--        <li>安排一下啵：{{index}}&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;{{menu}}</li>-->
<!--    </ul>-->
    <ul v-for="(menu,index) in list">
        <li>第{{menu.num}}好吃--------{{menu.name}}-------索引{{index}}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // list:['鸭血粉丝','螺蛳粉','大碗米线','黄焖鸡','地锅鸡']
            list:[
                {num:1,name:'鸭血粉丝'},
                {num:2,name:'螺蛳粉'},
                {num:3,name:'大碗米线'},
                {num:4,name:'黄焖鸡'},
                {num:5,name:'地锅鸡'}
            ]
        }
    })
</script>

在这里插入图片描述

2. `v-for`循环数组对象 02

<div id="app">
    <ul>
        <li v-for="(val,key,i) in menu">键：{{key}} -----  值：{{val}}  ----- 索引下标：{{i}}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            menu:{
              num:1,
              name:'小米椒爱上小公鸡',
              message:'噢~~~这该死的美味'
          }
        }
    })
</script>

在这里插入图片描述

3.`v-for`循环数值

<p v-for="(item,i) in 10">这是数值：{{item}}-----这是索引：{{i}}</p>

在这里插入图片描述

二、key属性的使用

通过一个案例来引入key

<body>
<div id="app">
    <div>
        <label>Id:
            <input type="text" v-model="id">
        </label>
        <label>Name:
            <input type="text" v-model="name">
        </label>

        <input type="button" value="添加" @click="add">
    </div>
    <ul>
        <li v-for="(menu,i) in list">
            <input type="checkbox"/>排名：{{menu.id}}------美味：{{menu.name}}
        </li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
                {id:1,name:'鸭血粉丝'},
                {id:2,name:'螺蛳粉'},
                {id:3,name:'大碗米线'},
                {id:4,name:'黄焖鸡'},
                {id:5,name:'地锅鸡'}
            ]
        },
        methods: {
            add() { // 添加方法
                this.list.unshift({ id: this.id, name: this.name })
            }
        }
    })
</script>
</body>

来吧展示:

在这里插入图片描述

问题:
当选中状态的时候取添加元素,我们发现,选中的状态自动跳到下一个input中取,并没有保持它原来的元素的状态
原因:在默认情况下，我们从data把一个数组渲染到页面上的时候，就不会再关注这个状态了
解决方法:
给元素绑定一个key属性 v-bind:key=“里面是唯一的标识符”
这个状态和当前循环的数值做了一个绑定关系，所以状态会存在
所以只要涉及到v-for循环，建议给循环的每一项都加上:key这个属性

 <li v-for="(menu,i) in list"  :key="menu.id">

来吧展示:

在这里插入图片描述

vue学习笔记（一） ---- vue指令（v-for 和 key 属性）

vue指令之v-for和key属性

一、 v-for

1. v-for循环数组

2. v-for循环数组对象 01

2. v-for循环数组对象 02

3.v-for循环数值

二、key属性的使用

vue指令之`v-for`和`key`属性

一、 `v-for`

1. `v-for`循环数组

2. `v-for`循环数组对象 01

2. `v-for`循环数组对象 02

3.`v-for`循环数值