效果如上：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script type="text/javascript" src="js/vue.js" ></script>
<title>购物车</title>
<style>
*{
margin: 0;
padding: 0;
}
#app{
margin: 30px auto;
width: 70%;
}
</style>
</head>
<body>
<div id="app">
<div>
<table class="table table-bordered text-center table-hover">
<tr>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
<td>操作</td>
</tr>
<tr v-for="(item,index) in goods">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
<td>
<button class="btn btn-danger" @click="add(index)"> + </button>
<button class="btn btn-default" @click="reduce(index)"> - </button>
</td>
</tr>
<tr>
<td colspan="4">
<button class="btn btn-success" @click="clickaddress">编辑收货地址</button>
</td>
</tr>
<tr class="text-right">
<td colspan="4">
<p>总价格：{{allprice}} </p>
<p>总数量：{{allcount}} </p>
<p>收货地址：{{val}} </p>
</td>
</tr>
</table>
<hr />
<form v-show="isshow">
<div class="form-group">
<input type="text" placeholder="请输入收货地址" class="form-control" v-model="val"/>
</div>
<div class="form-group">
<button class="btn btn-info" @click="ok" type="button">确定</button>
</div>
</form>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
goods:[
{name:"帽子",price:"100",count:"1"},
{name:"上衣",price:"100",count:"1"},
{name:"裤子",price:"100",count:"1"},
{name:"袜子",price:"100",count:"1"},
{name:"鞋子",price:"100",count:"1"}
],
isshow:false,
val:"",
},
methods:{
add(index){
this.goods[index].count++
},
reduce(index){
if(this.goods[index].count==0){
this.goods[index].count==0
}else{
this.goods[index].count--
}
},
clickaddress() {
this.isshow = true
},
ok(){
this.isshow = false
}
},
computed:{
allprice(){
var sum=0
for (var i=0;i<this.goods.length;i++) {
sum += parseInt(this.goods[i].price)*parseInt(this.goods[i].count)
}
return sum
},
allcount(){
var sum = 0
for(var i=0;i<this.goods.length;i++){
sum += parseInt(this.goods[i].count)
}
return sum
}
}
})
</script>
</body>
</html>