剛開始學習Vue,個人感覺Vue和Jquery最大的區別是Vue由數據驅動，封裝了DOM操作。
貼上寫的購物車小實例
Html 代碼
<!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>Document</title>
</head>
<body>
<div id="app">
<div v-if="list.length">
<!-- <template v-if="list.length"> -->
<table>
<thead>
<tr>
<th></th>
<th>商品名稱</th>
<th>商品單價</th>
<th>購買數量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td>{{ index+1}}</td>
<td>{{ item.name}}</td>
<td>{{ item.price }}</td>
<td>
<button @click="handleReduce(index)"
:disabled="item.count === 1">-</button>
{{item.count}}
<button @click="handleAdd(index)">+</button>
</td>
<td><button @click="handleRemove(index)">刪除</button></td>
</tr>
</tbody>
</table>
<div>總價: ￥ {{ totalPrice }}</div>
</div>
<!-- </template> -->
<div v-else>購物車爲空</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
</body>
</html>
JS代碼
var vue = new Vue({
el:"#app",
data:{
list:[
{
id:1,
name:"IPhone 7",
price:6888,
count:1
},{
id:2,
name:"iPad Pro",
price:5888,
count:1
},{
id:3,
name:"MacBook Pro",
price:24888,
count:1
}
]
},
computed:{
totalPrice:function(){
var total = 0;
for(var i = 0; i < this.list.length; i++){
var item = this.list[i];
total = total + item.price * item.count;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g ,',');
}
},
methods:{
handleReduce:function(index){
if(this.list[index].count === 1) return;
this.list[index].count--;
},
handleAdd:function(index){
this.list[index].count++;
},
handleRemove:function(index){
this.list.splice(index,1);
}
}
})