用Vue的一个购物车（1），虽然是自己写的但是也是来源于脚本之家的案例，就算转载啦

百度的时候看别人的代码总是，这几天没有事情，这几天项目需要，随便研究了一下巴拉巴拉巴拉，写了一个demo，大家看看，结果，看不懂，果然是太笨了，我是纯菜鸟啊！！！！TOT，然后我也不知道怎么才能把这个代码格式弄得很好看， 

<div>
展示：商品名称，商品价格，商品购买数量，操作按钮，商品总价<br>
方法：增加方法addNum，减少方法reduceNum,移除商品removeGoods<br>
计算属性：计算总价<br>
添加input框，输入值，响应更新<br>
</div>
<div id="container">
<h3>我的购物车</h3>
<div class="myTitle">
<ul>
<!--//input的value通过v-model绑定，通过addCommodity（）实现响应更新-->
<li>商品名称：<span><input type="text" v-model="inputName"/></span></li>
<li>商品价格：<span><input type="number" v-model="inputPrice"/></span></li>
<li>商品数量：<span><input type="number" v-model="inputNum"/></span></li>
<li>操作/ <button v-on:click="addCommodity(items.length)">加入</button></li>
</ul>
</div>
<!--判断items长度，渲染不同模板，因为切换不是很频繁所以选择v-if渲染-->
<template v-if="items.length">
<div class="myContent">
<ul v-for = "(index,item) in items" v-bind:id = item.id>
<li>{{item.name}}</li>
<li>￥{{item.price}}</li>
<li>
<span v-on:click = "addNum(index)"><button>+</button></span>
<span>{{item.count}}</span>
<span v-on:click = "reduceNum(index)"><button>-</button></span>
</li>
<li><button v-on:click = "removeGoods(index)">移除</button></li>
</ul>
</div>
<div class="priceAll">
<!--currency过滤器 : 将输入的数字转换成现金的过滤器。可以跟上货币符号（默认$）和保留的小数位（默认2）。-->
<span>总价:{{priceTotal | currency '￥' '2'}}</span>
</div>
</template>
<template v-else>
<div class="tips">
您的购物车空了，
你是否需要<a href="#">重新挑选</a>
</div>
</template>
</div>

js部分

var vm = new Vue({
el: "#container",
data: {
//items : commodityData
items: [{
name: "腰子树",
price: 1,
id: 1,
count: 1
}, ],
inputName: "",
inputPrice: null,
inputNum: null,
},
computed: { //计算属性，计算总价格，返回给页面展示
priceTotal: function() {
var price = 0;
//遍历items数组,计算当前（this）price字段和count字段的价格总和
for(var i = 0; i < this.items.length; i++) {
price += this.items[i].price * this.items[i].count;
}
return price;
}
},
methods: {
addCommodity: function(length) {
//通过手动输入商品加入商品
if(this.inputNum == null || this.inputName == null || this.inputPrice == null){
alert("请填写完整商品名称，价格以及数量！")
}else{
if(this.inputNum > 10 || this.inputNum < 1) {
alert("请输入1-10之间的数字！");
} else {
this.items.push({
name: this.inputName,
price: this.inputPrice,
id: "goods" +length,
count: this.inputNum
});
};
this.inputName = null;
this.inputPrice = null;
this.inputNum = null;
}
},
addNum: function(index) {//实现增加购买数量
var current = this.items[index];
if(current.count >= 10) {
alert("库存不够");
} else {
current.count++;
}
},
reduceNum: function(index) {
//实现减少购买数量
var current = this.items[index];
if(current.count <= 1) {
alert("数量不能小于1");
} else {
current.count--;
}
},
removeGoods: function(index) {
//vue1.0有方法this.items.$remove(item);需要从html传入一个参数item，2.0移除后用splice操作数组实现
//实现移除操作
this.items.splice(index, 1);
}
}
});

css部分

* {
margin: 0;
padding: 0;
}

#container {
width: 90%;
margin: 0 auto;
border: 1px solid #000;
}

h3 {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
margin: 0;
border-bottom: 1px solid #000;
}

.myTitle,
.myContent {
font-size: 0;
width: 100%;
padding: none;
list-style: none;
}

.myTitle li,
.myContent li {
width: 25%;
font-size: 14px;
height: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
}

.myTitle li:not(:first-child),
.myContent li:not(:first-child) {
box-sizing: border-box;
border-left: 1px solid #000;
}

.myContent ul {
border-top: 1px solid #000;
}
.priceAll,.tips{
border-top: 1px solid #000;
}