(5).v-for指令
功能：根據數組中的內容反覆生成多個相同結構的元素。
用法：<要反覆生成的元素 v-for="(value,i) of 數組/對象">
注意：
1.要反覆生成的元素，只需要寫一個當做模板即可！
2. v-for一定要寫在要反覆生成的元素上，而不是要反覆生成的元素的父元素上。
3. v-for of，即可遍歷數組，又可以遍歷對象——統一了for in和for of
強調：凡是用v-for時，必須同時綁定一個:key屬性
原因：
因爲v-for每次反覆生成的元素之間除了內容之外，單看元素是無差別的。即使將來只更改了數組中一個元素值，因爲v-for無法區分反覆生成的多個元素，就無法只精準更新一個元素。V-for只能採用笨辦法，將v-for負責的所有元素重新生成一遍。——效率極低。
綁定一個:key屬性的好處：
讓v-for反覆生成的每個元素都有一個唯一的標識。如果數組中某一個元素髮生改變，v-for可憑藉這唯一的標識找到一個頁面元素，只更新一個頁面元素即可。其餘頁面元素保持不變——效率高！
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(p,i) of products" :key="i">{{i+1}} | {{p.pname}} | {{p.price}}</li>
</ul>
<ul>
<li v-for="(value,key) of lilei" :key="key">{{key}} : {{value}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
products:[
{pname:"華爲", price:5588},
{pname:"蘋果", price:8588},
{pname:"小米", price:3588},
],
lilei:{
sid:1001,
sname:"Li Lei",
sage:11
}
}
})
</script>
</body>
</html>
效果圖
v-for指令還可以數數字
用法：<要反覆生成的元素 v-for=“i of 一個整數” :key=“i”>
原理:
- V-for從1開始循環，每次遞增1，到of後給的整數值結束.
相當於for(var i=1;i<=一個整數;i++){ … } - 每循環一次就將當前元素創建一個新的副本
- 變量i會依次接住每次+1後的新值。變量i可用於元素內容中的綁定語法。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pages{
list-style:none
}
.pages>li{
float:left;
padding:5px 10px;
border:1px solid #555
}
.pages>li~li{
border-left:none;
}
.pages>li:first-child{
border-radius:5px 0 0 5px;
}
.pages>li:last-child{
border-radius:0 5px 5px 0;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--需求: 根據變量pageCount反覆生成指定數量的分頁按鈕-->
<div id="app">
<ul class="pages">
<li>上一頁</li>
<li v-for="i of pageCount" :key="i">{{i}}</li>
<li>下一頁</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
pageCount:8 //共有8頁數據
}
})
</script>
</body>
</html>
效果圖
東哥筆記