可以自己重新引用一下vue.js的包
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 600px;
border: 1px solid #00FFFF;
}
.ul li {
list-style: none;
display: inline-block;
border-right: 1px solid #00FFFF;
padding: 0 25px;
}
li{
list-style: none;
}
</style>
</head>
<body>
<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
<div id="box">
<ul class="ul">
<li v-for="item in list">
<h3>{{item.name}}</h3>
<h3>{{item.price+'元/个'}}</h3>
<button @click="add(item)">购买</button>
</li>
</ul>
<hr />
<h1>购物车</h1>
<ul>
<li v-for="(item,index) in cart">
<h3>{{item.name}}</h3>
<h3 v-model="item.num">{{'数量：'+item.num+'个'}}</h3>
<button @click="removeNum(index)">-</button>
<span>{{item.num}}</span>
<button @click="addNum(index)">+</button>
<h3>{{'价格：'+item.num*item.price}}</h3>
<hr/>
</li>
总价：<h1>{{addMoney()+'元'}}</h1>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: '#box',
// 属性
data: {
list: [{
name: '西瓜',
price: '15',
num: 0
},
{
name: '香蕉',
price: '14',
num: 0
},
{
name: '橘子',
price: '22',
num: 0
},
{
name: '哈密瓜',
price: '21',
num: 0
},
],
cart: [
],
},
// 方法
methods: {
addNum(index) {
this.cart[index].num++;
},
removeNum(index) {
this.cart[index].num--;
if(this.cart[index].num<0){
this.cart[index].num = 0;
}
},
add(data) {
if (this.cart.findIndex(item => item.name === data.name) !== -1) {
// 存在的话就 不添加
data.num++;
}else{
data.num=1;
this.cart.push(data);
}
},
// 总价
addMoney(){
var sum =0;
for(var i = 0;i<this.cart.length;i++){
let money = this.cart[i].num*this.cart[i].price;
sum += money;
}
return sum;
}
}
});
</script>
</body>
</html>
