Vue-简单购物车

Posted 2020-08-16 东歌

优点

体积小。接口灵活。侵入性好，可用于页面的一部分，而不是整个页面。扩展性好。源码规范简洁。代码较为活跃，作者是中国人，可在官方论坛中文提问。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);
	 }
  }
});