标签：items pen model strip div new append 开发 click
优点
体积小。接口灵活。侵入性好，可用于页面的一部分，而不是整个页面。扩展性好。源码规范简洁。代码较为活跃，作者是中国人，可在官方论坛中文提问。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);
}
}
});
标签：items pen model strip div new append 开发 click
原文地址：http://www.cnblogs.com/zc123/p/6000668.html
