劃重點
- v-for:遍歷
牛肚一份帶走不謝：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-for指令的使用</title>
<script src="./lib/vue-2.6.10.js"></script>
</head>
<body>
<!-- v-for 直接修飾的是 對象 屬性 -->
<div id="app">
<!-- item 表示對應的 數組中的 （item） 單個的元素； in ：表示是包含在哪個數組中；listShuZu:表示的是一個數組
那麼 v-for="item in listShuZu" 就可以理解爲：通過for循環 把 數組listShuZu 中的每一個 item 元素對應的取出來
擴展：這裏只是 取的每一個元素；沒有取下標的參數；下一個案例數組listObj對象可以取下標 或者item中的name / id 等信息。
-->
<h3>"v-for 遍歷數組"</h3><br>
<p v-for="item in listShuZu">{{ item }}</p>
<br>
<!--listObj是 對象的數組；這裏的案例；裏面有兩個參數：item 和 index
item: 表示數組中的 每一個子元素 如：第一個子元素是： { id: 1, name: 'zs1' }
index： 表示的是：item 對應的索引下標 ；如第一個元素的索引下標就是：0
這樣可以通過：item.id 獲取到元素對應的id; 可以通過 item.name 獲取到元素對應的名稱 ；
注意：上面的 item 是定義的變量名稱；可以直接用插值表達式使用：{{ item }};因爲在JS中定義變量和 Java 中不是很一樣；在Java 中必須定義了一個變量才能使用；但是在JS中有的時候可以直接使用變量：我們姑且認爲這個變量默認是已經被定義的
-->
<h3>"v-for 遍歷對象數組數組"</h3> <br>
<p v-for="(item , index ) in listObj" :key="item"> === 元素：{{ item }} 元素的名字：{{ item.name }} 索引下標：{{ index }}
</p>
<br>
<br>
<!-- v-for直接遍歷了數字數組
i：表示：數組的子元素
index：標示了索引的 下標
-->
<h3>"v-for 直接迭代 數字數組"</h3> <br>
<p v-for="(i,index) in 5"> === 元素：{{ i }} 索引下標：{{ index }} </p>
<!-- 針對上面的 對 v-for的使用 總結幾點：
1:如果 只有一個參數：那麼獲取的遍歷結果就是該數組的子元素
如：v-for="item in list "
2:如果 有兩個參數：那麼一般第一個參數是 子元素；第二個參數是 索引下標 ;;這個時候 是多個參數的需要用 小括號（） 括起來。
如：v-for=“(item , index ) in list”
-->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
listShuZu: [1, 2, 3, 4, 5, 6],
listObj: [
{ id: 1, name: 'zs1' },
{ id: 1, name: 'zs1' },
{ id: 1, name: 'zs1' }
]
},
methods: {
}
})
</script>
</body>
</html>
效果圖：
