写的不太好不要说。。。。。
这是整体页面效果：
这是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
如：