Vue-簡單購物車

優點

體積小。接口靈活。侵入性好，可用於頁面的一部分，而不是整個頁面。擴展性好。源碼規范簡潔。代碼較為活躍，作者是中國人，可在官方論壇中文提問。github9000+。基於組件化的開發。

缺點

社區不大，如果有問題可以讀源碼。功能僅限於view層，Ajax等功能需要額外的庫。對開發人員要求較高。開發的話，需要webpack，不然很難用，最好配合es6。

 <div class="am-container" style="min-height:300px;" id="goshop">
 	<template v-if="items.length">
 		<table class="am-table am-table-striped am-table-hover am-text-xs am-table-contered">
 			<th>名稱</th>
 			<th>價格</th>
 			<th>數量</th>
 			<th>操作</th>
 			<tr v-for="item in items">
 			<td>{{item.name}}</td>
 			<td>{{item.price | currency '￥' 0}}</td>
 			<td><span><button @click="reduce($index)" class="{{item.num == 1 ? '' : 'am-btn-danger'}}"  >  -  </button></span> {{item.num}}  <span><button @click="append($index)" class="{{item.num < item.nums ? 'am-btn-danger' : ''}}" >+</button></span></td>
 			<td> <button @click="rm(item)" class="am-btn-danger" >移除</button></td>
 			</tr>
 		</table>
 		<div id="message">
 			<label>收件人：</label>
 			<input type="text"  v-model="name"/>
 			<label>地址：</label>
 			<input type="text" v-model="address"/>
 		</div>
 		<div >
 			<h3>清單</h3>
 			<ul>
 				<li><font color='red'>總計：</font><span>{{total | currency '￥' 0}}</span></li>
 				<li>收件人：<span>{{name}}</span></li>
 				<li>收件地址：<span>{{ address }}</span></li>
 			</ul>
 		</div>
 	</template>
 	<template v-else>
 		hello world
 	</template>
</div>

　　js代碼

var data =[{'name':'小米5','price':'2400','nums':'3','num':'1'},{'name':'iphone','price':'3800','nums':'5','num':'1'},{'name':'榮耀8','price':'2500','nums':'7','num':'1'}];
var vm = new Vue({
	'el':'#goshop',
	data:{
	    items:data,
	    name:'',
	    address:'',
	},
	computed:{
		total:function(){
			var total = 0;
			for(var i in this.items){
				total += this.items[i].price * this.items[i].num;
			}
			return total;
		}
	},
	methods:{
	  reduce:function(index){
	      var item = this.items[index];
	      if(item.num == 1 ){
	      	 return false;
	      }
	      item.num--;
	  },
	 append:function(index){
	      var item = this.items[index];
	      if(item.num < item.nums ){
	      	  item.num++;
	      }
	 },
	 rm:function(index){
		// this.items.splice(index,1);
		this.items.$remove(index);
	 }
  }
});