写的不太好不要说。。。。。
这是整体页面效果：
这是html代码（页面效果如上图）
<html>
<title>vue</title>
<head></head>
<script src='js/vue/vue.js'></script>
<link rel="stylesheet" href="css/index.css">
<body>
<div id='box'>
<div id="main">
<p class="header">
<img src='img/dd_header_shop.gif'height="100%" style="float: left;">
<span class="titleLeft">{{titleLeft}}</span>
<span class='titleRight'>{{titleRight}}</span>
</p>
<div class='soppinghead'>
<div class='soppinghead-Left'>{{soppingheadLeft}}</div>
<div class='soppinghead-right'>
<img v-bind:src="showImg" v-on:click="show" height="100%">
</div>
</div>
<!-- 推荐物品栏 -->
<div class='soppingMain' v-show="bool">
<div class='soppingMainLeft'>
<ul>
<li v-for="(item,index) in carOne">
<div style="width: 50%;text-align: left;color:#1F72CA"> ·{{item.Tradename}}</div>
<div style="width: 15%;text-decoration: line-through;color:gray;text-align: center;">￥{{item.originalprice}}</div>
<div style="width: 15%;text-align: center;">￥{{item.presentprice}}</div>
<div style="width: 20%;text-align: center;"><a href="javascript:void(0)" style="text-decoration: none;color:#F0886A;" v-on:click="shppingOne(item,index)">购买</a></div>
</li>
</ul>
</div>
</div>
<div class='soppingCar'>
<div class="soppingCarHead"><b>您已选购以下商品</b></div>
<table width='100%' cellspacing='0' style="border:2px solid #919192;border-bottom: none;">
<!-- 购物车表头 -->
<tr style="height: 40px;background-color: #D8E4C6;">
<td style="width: 30%;"> 商品名</td>
<td style="width: 14%;text-align: center;">单品积分</td>
<td style="width: 14%;text-align: center;">市场价</td>
<td style="width: 14%;text-align: center;">当当价</td>
<td style="width: 14%;text-align: center;">数量</td>
<td style="width: 14%;text-align: center;">删除</td>
</tr>
<!-- 购物车 -->
<tr style="height: 40px;background-color: #FEFBF2;" v-for="(item,index) in car" :style='item.style1?"background-color:#FEFBF2":"background-color:#FFCC66"'>
<td style="border-bottom: 1px dashed gray;width: 30%;color: #1962B3;"> {{item.Tradename}}</td>
<td style="border-bottom: 1px dashed gray;width: 14%;text-align: center;">{{item.integral}}</td>
<td style="border-bottom: 1px dashed gray;width: 14%;text-align: center;">￥{{item.originalprice}}</td>
<td style="border-bottom: 1px dashed gray;width: 14%;text-align: center;">￥{{item.presentprice}}({{item.Discount}}折)</td>
<td style="border-bottom: 1px dashed gray;width: 14%;text-align: center;">
<button style="width: 10%;" v-show="item.condition" v-on:click="subtraction(item)">-</button>
<input type="text" style="width: 20%;text-align: center;" v-model:value="item.math" v-on:focus="focuse(item)" v-on:blur="bluerr(item)">
<button style="width: 10%;" v-on:click="addition(item)">+</button>
</td>
<td style="border-bottom: 1px dashed gray;width: 14%;text-align: center;"><a href="javascript:void(0)" style="text-decoration: none;color: #3563BC;" v-on:click="die(index)">删除</a></td>
</tr>
</table>
<!-- 求总 -->
<div class='total'>
<div class="totalRight">
<div class="totalRight-left">
<p>您共节省金额:￥<font color='red'>{{saves}}</font></p>
<p>可获得商品积分:<font color='red'>{{Totalpointss}}</font></p>
</div>
<div class="totalRight-right">
<p>商品金额总计:￥<font color='red'>{{Totalprices}}</font></p>
<img src='img/shopping_balance.gif' v-on:click="settlement">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src='js/index.js'>
</script>
</html>
由于css过于繁杂就不上了，直接从js说起
js代码：
这是页面中的所有数据：
接下来是所有的事件操作(只放部分代码)：
show:function(){
this.bool = !this.bool
this.showImg = this.bool ? 'img/shopping_arrow_up.gif':'img/shopping_arrow_down.gif'
},
这段代码是用来隐藏推荐商品的框框的
如：
shppingOne:function(arr,index){
Vue.set(arr,'integral',arr.presentprice*10)
Vue.set(arr,'conditio',true)
Vue.set(arr,'style1',true)
Vue.set(arr,'Discount',((arr.presentprice/arr.originalprice).toFixed(2)*10).toFixed(1))
arr.math <= 0 ? arr.condition = false : arr.condition = true
//去重复
let ble = false
for(var i=0;i<this.car.length;i++){
if(arr.Tradename==this.car[i].Tradename && ble == false){
ble = true
}
}
if(!ble){
this.car.push(arr)
}else{
arr.math++
}
},
这段代码是点击购买时添加进购物车，如果点击的是同样的东西就给在购物车中的该物品数量加1
如：
剩下的就看看就好
接下来是计算总价和总积分和总节省的价格：
计算总价：
Totalprices:function(){
let sum = 0;
for(var i=0;i<this.car.length;i++){
sum+=this.car[i].presentprice*this.car[i].math
}
return sum.toFixed(2)
},
循环所有的单价和数量用一个变量去接每个单价乘数量的加在一起的总和
计算总积分：
Totalpointss:function(){
let sum = 0
for(var i=0;i<this.car.length;i++){
sum+=this.car[i].integral*this.car[i].math
}
return sum
},
循环所有积分和数量用一个变量去接收每个积分乘数量加在一起的总和
计算总节省的价格：
saves:function(){
let sum = 0
for(var i=0;i<this.car.length;i++){
sum+=(this.car[i].originalprice*this.car[i].math-this.car[i].presentprice*this.car[i].math)
}
return sum.toFixed(2)
},
循环所有的市场价和当当价和数量用一个变量去接受每个市场价乘数量减去这个市场价的当当价乘数量加在一起的总和
最后是对input输入框的侦听：
watch:{
//侦听input输入框中的数字
car:{
handler(newVal,oldVal){
for(var i=0;i<newVal.length;i++){
if(newVal[i].math == '' || newVal[i].math<1 || isNaN(newVal[i].math) || String(newVal[i].math).indexOf('.')!==-1 || String(newVal[i].math).substring(0,1)=='0'){
newVal[i].math = 0;
}
if(newVal[i].math<0){
newVal[i].math = 0;
}
if(newVal[i].math.length>3){
newVal[i].math = 999;
}
}
},
//开启深入监听
deep:true
},
}
侦听input框中输入的数，使得输入的数不能小于0、不能是空格、不能是字母或者字符串、不能有小数点、开头不能为0如果有以上情况都会变成0。输入的数超过3位数都会是999（不能超过3位数）