vue学习笔记(一) ---- vue指令(v-for 和 key 属性)

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue指令之v-forkey属性

一、 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">

来吧展示:

在这里插入图片描述

<think>嗯,用户让我帮忙写Vue2的v-for代码示例。首先,我得确认他们需要的是Vue2而不是Vue3,因为两者在语法部分功能上有差异。v-forVue中用来循环渲染列表的指令,常见的使用场景包括渲染数组或对象。 接下来,我需要考虑用户可能的水平。他们可能刚开始学习Vue,所以示例应该简单明了,涵盖基本用法。可能需要包括数组渲染、索引,以及对象的键值对遍历。另外,绑定key属性很重要,这是Vue的最佳实践,避免渲染问题,应该提醒用户这点。 用户可能希望看到完整的HTML结构,而不仅仅是片段,这样他们可以直接复制运行。所以示例应该包含必要的Vue实例配置,比如data里的数组对象。同时,可能需要解释每个部分的作用,确保他们理解代码的结构。 是否需要加入样式呢?可能不需要太复杂,但基础的列表样式可以让示例更直观。比如用<ul><li>展示数组,用<div>展示对象属性。同时,使用不同的例子来展示不同数据结构的处理,比如数组元素、带索引的数组、对象的键值,以及嵌套循环的情况。 用户可能没有提到key的重要性,但作为经验,必须强调在v-for中使用:key的好处,比如提高性能,避免重复元素的问题。所以代码中每个循环项都应该绑定唯key,比如数组的索引或元素的id。 最后,检查代码是否正确,比如Vue实例的创建是否正确,data函数的写法是否符合Vue2的规范,以及模板中的指令语法是否正确。确保示例能够直接运行,没有语法错误,比如闭合标签、正确的花括号使用等。 总结,示例应包含多个v-for用例,清晰的注释,必要的解释,并强调key的使用。这样用户不仅能复制代码,还能理解背后的原理最佳实践。</think>以下是个详细的Vue2中`v-for`指令的使用示例,包含不同场景的演示: ```html <!DOCTYPE html> <html> <head> <title>Vue2 v-for示例</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> <!-- 基础数组渲染 --> <h3>商品列表:</h3> <ul> <li v-for="(item, index) in products" :key="index"> {{ index + 1 }}. {{ item.name }} - ¥{{ item.price }} </li> </ul> <!-- 对象属性遍历 --> <h3>用户信息:</h3> <div v-for="(value, key) in userInfo" :key="key"> {{ key }}: {{ value }} </div> <!-- 带索引的数组遍历 --> <h3>待办事项(带索引):</h3> <div v-for="(todo, index) in todos" :key="todo.id"> <input type="checkbox" v-model="todo.completed"> {{ index + 1 }}. {{ todo.text }} </div> <!-- 嵌套循环 --> <h3>分类商品:</h3> <div v-for="category in categories" :key="category.id"> <h4>{{ category.name }}</h4> <ul> <li v-for="product in category.products" :key="product.id"> {{ product.name }} (库存:{{ product.stock }}) </li> </ul> </div> </div> <script> new Vue({ el: '#app', data() { return { products: [ { name: '笔记本电脑', price: 6999 }, { name: '智能手机', price: 3999 }, { name: '无线耳机', price: 599 } ], userInfo: { name: '张三', age: 28, email: 'zhangsan@example.com' }, todos: [ { id: 1, text: '学习Vue', completed: false }, { id: 2, text: '项目实践', completed: true }, { id: 3, text: '编写文档', completed: false } ], categories: [ { id: 1, name: '电子产品', products: [ { id: 101, name: '键盘', stock: 50 }, { id: 102, name: '鼠标', stock: 30 } ] }, { id: 2, name: '家居用品', products: [ { id: 201, name: '台灯', stock: 20 }, { id: 202, name: '收纳盒', stock: 15 } ] } ] } } }); </script> </body> </html> ``` 关键点说明: 1. **基础数组遍历**:使用`(item, index)`形式获取元素索引,`:key`绑定唯标识 2.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值