使用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
}
}
}
}
},
})