Vue v-for語句
在學習v-for語句之前，先了解一下vue是怎么數據綁定的
數據綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：
<span>Message: {{ msg }}</span>
Mustache 標簽將會被替代為對應數據對象上 msg 屬性的值。無論何時，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。
通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上的其它數據綁定：
<span v-once>這個將不會改變: {{ msg }}</span>
v-for把一個數組對應為一組元素
如上文那樣的搭建vue環境后.
v-for語法法
我們用 v-for 指令根據一組數組的選項列表進行渲染。v-for 指令需要使用 item in items 形式的特殊語法，items 是源數據數組並且 item 是數組元素迭代的別名。當然你也可以用你喜歡的別名。如：
<div id="app">
<ul>
<li v-for="string in aString">{{string}}</li>
</ul>
</div>
在data數據屬性中，寫上一個素組的信息：
// 簡單學習vue v-for迭代
var app = new Vue({
el: '#app',
data: {
aString:['我','是','數','組']
})
結果：
- 我
- 是
- 數
- 組
一個對象的 v-for
<ul>
<li>{{objInArr}}</li>
<li v-for="obj in objInArr">{{obj.name}} : {{obj.sex}}</li>
</ul>
var app = new Vue({
el: '#app',
data: {
objInArr: [
{
name: "我是數組里面的對象1",
sex: "gay"
},
{
name: "我是數組里面的對象2",
sex: "gay"
},
{
name: "我是數組里面的對象3",
sex: "gay"
},
],
}
})
結果：
你甚至可以在操作對象時使用另外兩個參數(一定得是對象):
(value, key, index) in object
<ul>
<li>key和index演示</li>
<li v-for="(value, key, index) in student"> {{index}}.{{key}}:{{value}} </li>
</ul>
var app = new Vue({
el: '#app',
data: {
student: {
name: "這里是對象",
sex: "gay",
num: 233
},
}
})
結果：
END
完整demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>v-for</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<ul>
<li v-for="string in aString">{{string}}</li>
</ul>
<ul>
<li>{{objInArr}}</li>
<li v-for="obj in objInArr">{{obj.name}} : {{obj.sex}}</li>
</ul>
<ul>
<li>key和index演示</li>
<li v-for="(value, key, index) in student"> {{index}}.{{key}}:{{value}} </li>
</ul>
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
// 簡單學習vue v-for迭代
var app = new Vue({
el: '#app',
data: {
aString:['我','是','數','組'],
objInArr: [
{
name: "我是數組里面的對象1",
sex: "gay"
},
{
name: "我是數組里面的對象2",
sex: "gay"
},
{
name: "我是數組里面的對象3",
sex: "gay"
},
],
student: {
name: "這里是對象",
sex: "gay",
num: 233
},
}
})
</script>
</body>
</html>