這篇文章帶大家一起了解下Vue的清單渲染指令：v-for，希望給大家有幫助！
⭐⭐
個人覺得其實就是基礎文法的for循環，使用上也差不多，只是形式不同罷了,理解會使用。 （學習影片分享：vue影片教學）
使用方法;
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();以上是淺析Vue的列表渲染指令：v-for的詳細內容。更多資訊請關注PHP中文網其他相關文章！
