欢迎来到“雪碧聊技术”CSDN博客！
在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。
让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！
目录
一、列表渲染（v-for）
1、遍历对象数组
①注意：尽量使用:key给每个小li赋一个唯一的值，类似于主键，后续有用。
②赋值:key的方式1：使用对象唯一的属性
③赋值:key的方式2：使用v-for遍历的下标index
④注意：上述v-for中的in，也可以换成of，这是两种写法，了解即可。
2、遍历对象
3、遍历字符串（用得少）
4、遍历指定次数（用得少）
二、key的作用和原理
1、如何选择key呢？
①一般使用对象数据的唯一标识作为key
举例：
②如果不存在对数据节点的逆序添加、逆序删除的打乱顺序的操作，也是可以用index来充当：key的值的。
三、列表过滤
1、什么是列表过滤？
举例：
2、实现列表过滤的两种方式
①使用计算属性computed
②使用监视属性watch
3、分析上述的代码
①indexOf的作用：用来判断一个字符串中，是否包含某个字符/字符串。
规律：如果字符串中包含某个字符/字符串，就返回所在的下标；如果不包含，则返回-1。
上述代码解读：p.name.indexOf(newVal) !== -1表示对象p的name属性如果包含newVal，就返回0~n，该表达式的值就为true；如果对象p的name属性不包含newVal，则返回-1，则该表达式的值就为false。
②indexOf的特点：任何字符串都包含空字符串''，且下标为0。
举例：
应用：
③过滤函数filter的用法：用在数组上，且参数为数组的元素。
④最重要的一点：filter函数，过滤后的数组，是一个全新的数组，即：不会对原来的数组产生影响，而是新建了一个数组进行操作。
结语
一、列表渲染（v-for）
1、遍历对象数组
运行结果：
①注意：尽量使用:key给每个小li赋一个唯一的值，类似于主键，后续有用。
②赋值:key的方式1：使用对象唯一的属性
运行结果：
③赋值:key的方式2：使用v-for遍历的下标index
运行效果：
④注意：上述v-for中的in，也可以换成of，这是两种写法，了解即可。
2、遍历对象
运行结果：
3、遍历字符串（用得少）
运行结果：
4、遍历指定次数（用得少）
运行结果：
二、key的作用和原理
1、如何选择key呢？
①一般使用对象数据的唯一标识作为key
举例：
而且，这些对象数组，一般是后端查出来的，肯定会有主键id的，否则到时候删除业务都无法完成，因为删除业务肯定需要传入一个id值的。
运行结果：
②如果不存在对数据节点的逆序添加、逆序删除的打乱顺序的操作，也是可以用index来充当：key的值的。
三、列表过滤
1、什么是列表过滤？
举例：
我们根据输入的数据，渲染对应的内容。
2、实现列表过滤的两种方式
①使用计算属性computed
<body><div id="root"><input type="text" v-model="keyWord" placeholder="请输入姓名"><ul><li v-for="p in filpersons" :key="p.id">{{p.name}}</li></ul></div><script type="text/javascript">const vm = new Vue({el:'#root',data:{//用于记录用户输入的姓名（条件查询）keyWord:'',//persons对象数组，作为原数组，不能动persons:[{ id: '001', name: '马冬梅', age: 19, sex: '女' },{ id: '002', name: '周冬雨', age: 20, sex: '女' },{ id: '003', name: '周杰伦', age: 21, sex: '男' },{ id: '004', name: '温兆伦', age: 22, sex: '男' },],},computed: {//根据persons和keyWord，来计算出filpersons（过滤后的对象数组）filpersons() {return this.persons.filter((p) => {return p.name.indexOf(this.keyWord) !== -1})}}})</script>
</body>运行效果：
②使用监视属性watch
<body><div id="root"><input type="text" v-model="keyWord" placeholder="请输入姓名"><ul><li v-for="p in filpersons" :key="p.id">{{p.name}}</li></ul></div><script type="text/javascript">const vm = new Vue({el:'#root',data:{keyWord:'',persons:[{ id: '001', name: '马冬梅', age: 19, sex: '女' },{ id: '002', name: '周冬雨', age: 20, sex: '女' },{ id: '003', name: '周杰伦', age: 21, sex: '男' },{ id: '004', name: '温兆伦', age: 22, sex: '男' },],//先定义一个空数组，用来接收persons过滤后的对象数组filpersons:[]},watch:{keyWord:{immediate : true, //表示上来就执行一次该方法handler(newVal){this.filpersons = this.persons.filter((p) => {return p.name.indexOf(newVal) !== -1})}}}})</script>
</body>运行结果：
3、分析上述的代码
①indexOf的作用：用来判断一个字符串中，是否包含某个字符/字符串。
规律：如果字符串中包含某个字符/字符串，就返回所在的下标；如果不包含，则返回-1。
上述代码解读：p.name.indexOf(newVal) !== -1表示对象p的name属性如果包含newVal，就返回0~n，该表达式的值就为true；如果对象p的name属性不包含newVal，则返回-1，则该表达式的值就为false。
②indexOf的特点：任何字符串都包含空字符串''，且下标为0。
举例：
应用：
③过滤函数filter的用法：用在数组上，且参数为数组的元素。
this.persons.filter((p) => {
return p.name.indexOf(newVal) !== -1
})
该函数，表示对persons对象数组进行过滤，p是该数组中的元素（对象），return的值是true，表示该元素不被过滤；如果return的值是false，表示该元素将从数组中过滤。
④最重要的一点：filter函数，过滤后的数组，是一个全新的数组，即：不会对原来的数组产生影响，而是新建了一个数组进行操作。
结语
以上就是vue中的列表渲染（v-for）、key的作用和原理、列表过滤的全部内容。
想了解更多的vue知识，请关注本博主~~
