💭💭
✨: Vue的v-for指令
💟:东非不开森的主页
💜:如果有幸和你一起学习一起进步,那就太棒啦💜💜
Vue的列表渲染
1.1.v-for
⭐⭐
个人感觉其实就是基础语法的for循环,使用上也差不多,只是形式不同罢了,理解会使用。
使用方法;
- 遍历数组
v-for="item in 数组"
v-for="(item, index) in 数组"
对一个数组进行遍历实例:
<div class="item" v-for="item in products"><h3 class="title">商品:{{item.name}}</h3><span>价格:{{item.price}}</span><p>秒杀:{{item.desc}}</p></div>const app = Vue.createApp({data(){return{//2.数组 存放的是对象products:[{id:11,name:"mac",price:1000,desc:"99"},],};},});
app.mount("#app");
- 遍历对象 ⭐⭐ v-for也支持遍历对象,并且支持有一二三个参数:
- 一个参数: “value in object”;
- 二个参数: “(value, key) in object”;
- 三个参数: “(value, key, index) in object”;
v-for同时也支持数字的遍历:
每一个item都是一个数字;
<!--2.遍历对象 --><ul><li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li></ul>const app = Vue.createApp({data(){return{info:{bame:"why",age:18,height:1.88},};},});
app.mount("#app");
- 遍历字符串
<li v-for="item in 100">{{item}}</li>
1.2.v-for和template
⭐⭐
我们可以使用templ元素来循环渲染一段包含多个元素的内容
为什么这里不使用div呢?
我之前学的时候也没有怎么考虑这个,整理笔记的时候发现了这个问题
原因:
- 如果是div包裹的话,div也会被渲染出来
- 而使用template包裹的话,template并没有被渲染,相较于使用div会节省一个没有必要的div标签的使用。
其实,template的作用就是模板占位符,可以帮助我们包裹元素,在循环的过程总,template不会被渲染到页面上。
- div(如果div没有实际的意义,那么可以使用template替换)
<div v-for="(value,key,index) in infos"><span>{{value}}</span><strong>{{key}}</strong><i>{{index}}</i></div>
- template
<template v-for="(value,key,index) in infos"><span>{{value}}</span><strong>{{key}}</strong><i>{{index}}</i></template>
1.3.v-for 数组更新检测
⭐⭐
Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新
被包裹过的方法包括:
- push() 数组的后面插入元素
- pop() 从数组后面删除一个元素
- shift() 从数组前面删除一个元素
- unshift() 从数组前面插入一个元素
- splice() 数组的剪贴、插入、删除
- sort() 排序
- reverse() 反转
这些方法的用法其实在js中都是差不多的,用到的时候想起来再查查
替换数组的方法
- 上面的方法会直接修改原来的数组;
- 但是某些方法不会替换原来的数组,而是会生成新的数组,比如 filter()、concat() 和 slice();
//并不是完整写法!!!<li v-for="item in names">{{item}}</li>names:["abc","bac","aaa","cbb"],// 1.直接将数组修改为一个新的数组this.names =["cc","kk"];// 2.通过一些数组的方法,修改数组中的元素this.names.push("cc");this.names.pop();this.names.splice(2,1,"cc");this.names.sort();this.names.reverse();
ps:splice和slice用法和区别
splice和slice用法和区别
国庆快乐呀
版权归原作者 东非不开森 所有, 如有侵权,请联系我们删除。