html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表渲染</title></head><body> <!-- v-for可以將一組數組渲染到列表當中 --> <!-- 以item in items的形 ...
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
</head>
<body>
<!-- v-for可以將一組數組渲染到列表當中 -->
<!-- 以item in items的形式 其中 items是源數據 item是他的別名 -->
<ul id="app-1">
<li v-for="item in items">
<!-- 註意：這裡的item和message定義要前後一致 -->
{{item.message}}
</li>
</ul>
<!-- 在v-for模塊中我們有對父作用域的完全訪問許可權 其中還可以增加一個參數 索引index -->
<ul id="app-2">
<!-- v-for使用在li中 -->
<li v-for="(item2,index) in items2">
{{parentMessage}}-{{index}}-{{item2.message2}}
</li>
</ul>
<!-- 註意：還可以用of 代替 in -->
<!-- 如同v-if v-for也可以與template一起使用來渲染多個元素塊 -->
<ul id="app-3">
<template v-for="item3 of items3">
<!-- 標簽中{{}}不能忘記！！！ -->
<li>{{item3.message3}}</li>
<li v-bind:class="{active: isActive}"></li>
</template>
</ul>
<!-- v-for還可以與對象的屬性連用 -->
<ul id="app-4">
<li v-for="value in object">
{{value}}
</li>
</ul>
<!-- 還可以添加鍵名參數 -->
<ul id="app-5">
<li v-for="(value , key) in object2">
{{ key }} : {{ value }}
</li>
</ul>
<!-- 還可以添加index -->
<ul id="app-6">
<li v-for="(value , key ,index) in object3">
{{ key }} : {{ value }} : {{ index }}
</li>
</ul>
<!-- v-for還可以用於整數 -->
<div id="app-7">
<!-- 註意：只寫這些代碼是運行不了的 還要進行new Vue -->
<span v-for="n in 10">{{ n }}</span>
</div>
<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>
js:
var app=new Vue({
el:'#app-1',
data:{
items:[
{message:'我是列表1'},
{message:'我是列表2'}
]
}
});
var app2 = new Vue({
el: '#app-2',
data: {
parentMessage: 'Parent',
items2: [
{ message2: 'Foo' },
{ message2: 'Bar' }
]
}
});
var app4=new Vue({
el:'#app-4',
data:{
object:{
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
});
var app5=new Vue({
el:'#app-5',
data:{
object2:{
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
});
var app6=new Vue({
el:'#app-6',
data:{
object3:{
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
});
var app7=new Vue({
el:'#app-7',
});
未完...
