您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue的列表渲染指令v-for怎么使用”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“Vue的列表渲染指令v-for怎么使用”文章能幫助大家解決問題。
??
個人感覺其實就是基礎語法的for循環,使用上也差不多,只是形式不同罷了,理解會使用。
使用方法;
1、遍歷數組
對一個數組進行遍歷實例:v-for="item in 數組"
v-for="(item, index) in 數組"
<div class="item" v-for="item in products">
<h4 class="title">商品:{{item.name}}</h4>
<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也支持遍歷對象,并且支持有一二三個參數:
一個參數: “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");
3、遍歷字符串
1.2.v-for和template<li v-for="item in 100">{{item}}</li>
??
我們可以使用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>
??
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();
關于“Vue的列表渲染指令v-for怎么使用”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識,可以關注億速云行業資訊頻道,小編每天都會為大家更新不同的知識點。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。