使用vue来实现当当网

<div id="main">
<div><img src="images/shopping_myshopping.gif" alt="shopping"> <a href="#">全场免运费活动中</a></div>
<!--为您推荐商品开始-->
<div class="shopping_commend">
<div class="shopping_commend_left">根据您挑选的商品，当当为您推荐</div>
<div class="shopping_commend_right"><img src="images/shopping_arrow_up.gif" alt="shopping"
@click="show"></div>
</div>
<div id="shopping_commend_sort" v-show="bool">
<ul v-for="(item,index) in list" :key="index">
<li class="shopping_commend_list_1">{{item.title}}<a href="#" class="blue"></a></li>
<li class="shopping_commend_list_2">￥{{item.price}}</li>
<li class="shopping_commend_list_3">￥{{item.discount}}</li>
<li class="shopping_commend_list_4">
<a href="#" class="shopping_yellow" @click="add(item)">购买</a>
</li>
</ul>
</div>
<div class="shopping_list_top">您已选购以下商品</div>
<div class="shopping_list_border">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="shopping_list_title">
<td>商品名</td>
<td>单品积分</td>
<td>市场价</td>
<td>当当价</td>
<td>数量</td>
<td>删除</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="shopping_product_list" v-for="(item,index) in box" :key="index">
<td class="shopping_product_list_1"><a href="#" class="blue">{{item.title}}</a></td>
<td class="shopping_product_list_2">{{item.product}}</td>
<td class="shopping_product_list_3">￥<span>{{item.price}}</span></td>
<td class="shopping_product_list_4">￥<span>{{item.discount}}</span> </td>
<td class="shopping_product_list_5">
<input type="button" value="-" @click="reduces(item)" /> <!--减-->
<input type="text" v-model="item.val">
<input type="button" value="+" @click="item.val++" />
</td>
<td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue"
@click="dele(index)">删除</a></td>
</tr>
</table>
<div class="shopping_list_end" >
<ul>
<li class="shopping_list_end_1"@click="clears"><input type="image" src="images/shopping_balance.gif"></li>
<li class="shopping_list_end_2">￥<span id="sumPrice">{{total}}</span></li>
<li class="shopping_list_end_3">商品金额总计：</li>
<li class="shopping_list_end_4">您共节省：<label class="shopping_list_end_yellow">￥<span
id="sumDis">{{saves}}</span></label><br />
可获商品积分：<label class="shopping_list_end_yellow" id="sumScore">{{intes}}</label>
</li>
</ul>
</div>
</div>

</div>

new Vue({
el: "#main",//节点，element简写，选择器
data: {//vue存放数据的地方，是以键值对的方式来存放
bool:true,//做标识
list: [{
title: 'JavaScript DOM编程艺术',
price: '39.00',
discount: '29.30'
},
{
title: '解禁（当当网独家首发）',
price: '28.00',
discount: '19.40'
},
{
title: '地王之王（金融危机下房地产行...）',
price: '32.80',
discount: '25.10'
},
{
title: '逃庄',
price: '36.00',
discount: '27.70'
},
{
title: '深入浅出MySQL数据库开发，优...',
price: '59.00',
discount: '47.20'
},
{
title: '大玩家（马未都、王刚推荐！）',
price: '34.80',
discount: '20.60'
},
{
title: '都市风水师--官场风水小说',
price: '39.80',
discount: '30.50'
},
{
title: '国戏（以麻将术解读宦海沉浮...）',//书名
price: '25.00',//原价
discount: '17.30'//打折后
},
],
box:[
{
title:'私募（首部披露资本博弈秘密的金融...',
product:189,
price:'25.00',
val:1,
discount:'18.90',
},
{
title:'小团圆（张爱玲最神秘小说遗稿）',
product:173,
price:'17.30',
val:1,
discount:'10.90',
},
{
title:'不抱怨的世界(畅销全球80国的世界...',
product:154,
price:'24.80',
val:1,
discount:'15.40',
},
{
title:'福玛特双桶洗衣机XPB20-07S',
product:358,
price:'458.00',
val:1,
discount:'358.00',
},
{
title:'PHP和MySQL Web开发 （原书第4版）',
product:712,
price:'95.00',
val:1,
discount:'71.20',
},
{
title:'法布尔昆虫记（再买￥68.3即可参加“满199元减10元现金”活）',//书名
product:10,//积分
price:'198.00',//原价
val:1,
discount:'130.70',//打折后
}
],
},
methods:{//vue实例存放事件的地方
//收缩
show(){
this.bool=!this.bool
},
//添加
add(item){
for (let i of this.box) {//i是对象 
// console.log(i.title);
if(i.title==item.title){//判断
i.val++//数量加加
return 
}
}
this.box.push({//在数组末尾添加
title:item.title,//书名
product:item.discount*10,//积分 打折后*10
price:item.price,//原价
discount:item.discount,//打折后
val:1
})
},
//添加（方法二）
// add(title,price,discount){
// let color=true;//做标识
// for (let i in this.box) {//循环数组根据下标
// if(this.box[i].title===title){//判断根据数组的下标下的书名全等于书名
// this.box[i].val++;//数组的下标数量++
// color=false;
// break
// }
// // console.log(title);
// }
// if(color){//为true时
// this.box.push({//在数组末尾添加
// title:title,//第二组中的书名数据等于第一组中的书名数据
// product:discount*10,//积分 打折后*10
// price:price,//第二组中原价数据等于第一组中的原价数据
// discount:discount,//第二组中打折后数据等于第一组中的打折后的数据
// val:1
// })
// }
// },
//点击按钮-- ++
reduces(item){
if(item.val>1){//判断，数量大于1时
Vue.set(item,'val',--item.val)//参数1操作的对象，叁数二添加的属性，参数3需要添加的val值
}else{
alert("不能再--啦")
item.val=1
}
},
//删除行
dele(index){
if(confirm("确定要删除吗?")){
this.box.splice(index,1)
}
},
//清空
clears(){
if(this.box.length>0){//判断当前数组长度大于0
if(confirm("确定要全部清空吗？")){
this.box = [];
}
}
}
},
computed:{
//总金额（方法一）
total(){
let boxs=0
for (let i of this.box) {
boxs+=i.discount*i.val
}
return boxs.toFixed(2)
},
// 方法二
// total(){
// let amounts=0//用于累加
// for (let i in this.box) {
// // console.log(this.box[i]);
// amounts+=this.box[i].discount*this.box[i].val
// //折扣价*数量
// // // amounts+=this.box[i].discount*this.box[i].val//打折后*数量
// }
// return amounts.toFixed(2)//保留小数位数2位
// },

//节省（方法一）
// saves(){
// let costs=0
// for (let i of this.box) {
// costs+=(i.price-i.discount)*i.val
// }
// return costs
// },
// （方法二）
saves(){
let costs=0//原价
// let beats=0//打折
for (let i in this.box) {
costs+=(this.box[i].price-this.box[i].discount)*this.box[i].val
// costs+=this.box[i].price*this.box[i].val//原价*数量
// costs+=this.box[i].price*this.box[i].val//原价*数量
// beats+=this.box[i].discount*this.box[i].val//打折*数量
// bb+=(this.box[i].discount-this.box[i].price)*this.box[i].val
}
return costs.toFixed(2)
// return (costs-beats).toFixed(2)
},

//商品积分(方法一)
intes(){
let integral=0
for (let i of this.box) {
// console.log(i.price);
integral+=i.price*i.val
}
return integral
},
// 方法二
// intes(){
// let integral=0//积分
// for (let i in this.box) {
// integral+=this.box[i].product*this.box[i].val//积分*数量
// }
// return integral
// }



saves(){
let spares=0
for (let i in this.box) {
spares+=(this.box[i].price-this.box[i].discount)*this.box[i].val//原价-打折后*数量
// console.log(this.box[i].price,this.box[i].discount,this.box[i].val);
}
return spares.toFixed(2)//保留小数位数2位
}

},

watch:{
box:{//监听的对象
deep:true,//开启深度监听
handler(news,olds){
// console.log(news)
for (let i of news) {
if(isNaN(i.val)||i.val<1){//条件判断 
alert("非数")
i.val=1
}
}
}
}
},
})