个人感觉其实就是基础语法的for循环,使用上也差不多,只是形式不同罢了,理解会使用。
使用方法;
1、遍历数组
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");
登录后复制
2、遍历对象
⭐⭐
v-for也支持遍历对象,并且支持有一二三个参数:
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");
登录后复制
3、遍历字符串
<li v-for="item in 100">{{item}}</li>
登录后复制
⭐⭐
我们可以使用templ元素来循环渲染一段包含多个元素的内容
为什么这里不使用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>
登录后复制
⭐⭐
Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新
被包裹过的方法包括:
这些方法的用法其实在js中都是差不多的,用到的时候想起来再查查
替换数组的方法
//并不是完整写法!!!
<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();
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。