Vue学习Day3 v-for遍历、组件的key属性、列表点击变色案例、书籍购物车案例

本文链接：https://blog.csdn.net/gegegegege12/article/details/118527902

这篇博客记录了作者学习Vue的第三天，重点介绍了v-for指令在遍历数组和对象时的应用，包括组件的key属性。还探讨了Vue如何检测数组更新以及在列表项点击变色的简单案例。此外，通过书籍购物车的小案例展示了如何实现动态添加、删除数量，更新总价以及购物车的显示控制。

摘要由CSDN通过智能技术生成

想利用暑假时间好好学习一下vue，会记录每一天的学习内容。
今天是学习vue的第3天！

起起伏伏乃人生常态，继续加油～

1. v-for使用

v-for遍历数组

data: {
    names: ['name1','name2','name3','name4']
}

1.如果在遍历过程中不需要索引值

<!-- 1.在遍历过程中，没有使用索引 -->
<ul>
	<li v-for="item in names">{{item}}</li>
</ul>

2.如果在遍历过程中需要索引值

<!-- 2.在遍历过程中，需要拿到索引 -->
<!-- index就代表了取出的每个item在原数组的索引值 -->
<ul>
	<li v-for="(item,index) in names">{{index+1}}.{{item}}</li>
</ul>

v-for遍历对象

data: {
        info: {
            name: 'AIpoem',
            age: 18,
            height: 180
        }
}

1.遍历对象过程中，如果只是获取一个值，那么该值是键值对中的value

<!-- 1，遍历对象过程中，如果只是获取一个值，那么该值是键值对中的value -->
<ul>
    <li v-for="item in info"></li>
</ul>

2.获取key和value，格式：（value,key）

<!-- 2.获取key和value，格式：（value,key） -->
<ul>
    <li v-for="(value,key) in info">{{value}}--{{key}}</li>
</ul>

3.获取key和value和index，格式：(value,key,index)

<!-- 3.获取key和value和index，格式：（value,key,index） -->
<ul>
    <li v-for="(value,key,index) in info">{{value}}--{{key}}--{{index}}</li>
</ul>

组件的key属性

Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素。

官方推荐我们在使用v-for时，给对应的元素或组件添加一个key属性
为什么需要这个key属性？
- 和Vue的虚拟DOM的Diff算法有关
当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点
比如下例：
- 我们希望在B和C之间加一个F
- Diff算法默认执行起来是将C更新成F，D更新成C，E更新成D，最后再插入E
所以我们需要使用key来给每个节点做一个唯一标识
- Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点
key的作用主要是为了高效地更新虚拟DOM

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

⚠️：有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

（不要用index作为key）

2.检测数组更新

Vue是响应式的，所以当数据发生变化时，Vue会自动监测数据变化，视图会发生相应的更新

// 1.push() 数组最后插入元素
 this.letters.push('e');
// 2.pop()  删除数组最后一个元素
 this.letters.pop();
// 3.shift() 删除数组中第一个元素
 this.letters.shift();
// 4.upshift() 在数组最前面添加元素
this.letters.unshift('aaa');
// 5.splice() 删除元素/插入元素/替换元素
// 删除元素：第二个参数传入要删除几个元素（如果不传，则删除后面所有元素）
// 替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
// 插入元素：第二个参数传入0，后面跟上要插入的几个元素
// splice(index,howmany,item)
this.letters.splice();
// 5.sort()排序
this.letters.sort();
// 6.reverse() 反转
this.letters.reverse();

// set(要修改的对象，索引值，修改后的值)
vue.set(this.letters,0,'bbb');