main.js：
var app = new Vue({
el: "#app",
data: {
foodList: [{
name: "蔥",
price: 10,
discount: .5
},{
name: "姜",
price: 8,
discount: .8
},{
name: "蒜",
price: 15,
}]
}
});
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="food in foodList">{{food.name}}: {{food.discount?food.price*food.discount:food.price}}</li>
</ul>
</div>
<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
v-for中Vue改變數組內容：Vue.set()
<div id="app">
<ul>
<li v-for="item in numbers">{{item}}</li>
</ul>
<p><button v-on:click="changeNumbers">change numbers</button></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
numbers: [1, 2, 3, 4, 5]
},
methods: {
changeNumbers: function(){
Vue.set(this.numbers, 1, 20);
}
}
});
</script>
v-for中Vue增加數組內容：push()
<div id="app">
<ul>
<li v-for="item in numbers">{{item}}</li>
</ul>
<p><button v-on:click="add">add numbers</button></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
numbers: [1, 2, 3, 4, 5]
},
methods: {
add: function(){
this.numbers.push(6);
}
}
});
</script>
v-for中Vue反轉數組：reverse()
<div id="app">
<ul>
<li v-for="(item, index) in people" v-bind:key="item.id">{{item.name}}<input type="text"/></li>
</ul>
<p><button v-on:click="reverse">reverse numbers</button></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
people: [{
id: 1,
name: '張三'
},{
id: 2,
name: '李四'
},{
id: 3,
name: '王五'
}]
},
methods: {
reverse: function(){
this.people.reverse();
}
}
});
</script>