vue实现购物车的监听

利用vue简单实现购物车的监听,供大家参考,具体内容如下

主要运用的vue的监听,有兴趣的可以看看实现过程

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>利用vue实现对购物车的监听</title>

<script src="../vue.js"></script>

<style type="text/css">

table{

border: 1px solid black;

width: 100%;

text-align: center;

}

th{

height: 50px;

}

th, td{

border-bottom: 1px solid #ddd;

border-right: 1px solid #ddd;

}

</style>

</head>

<body>

<div id="app">

<h1>订单系统</h1>

<table>

<tr>

<th>编号</th>

<th>名称</th>

<th>品牌</th>

<th>价格</th>

<th>数量</th>

<th>操作</th>

</tr>

<tr v-for="val in items">

<td>{{val.id}}</td>

<td>{{val.name}}</td>

<td>{{val.pinpai}}</td>

<td>{{val.price}}</td>

<td>

<!-- 如果count等于0执行v-bind

绑定一个点击事件 -->

<button v-bind:disabled="val.count === 0" @click="val.count-=1">-</button>

{{val.count}}

<button @click="val.count+=1">+</button>

</td>

<td>

<button v-on:click="val.count = 0">移除</button>

</td>

</tr>

</table>

<!-- 调用totalPrice -->

你所需要支付总额为:${{totalPrice()}}

</div>

<script type="text/javascript" charset="UTF-8">

var vm = new Vue({

el:"#app",

data:{

items:[{

id:1,

name:'上衣',

pinpai:'阿迪达斯',

price:100,

count:1

},

{

id:2,

name:'裤子',

pinpai:'安踏',

price:528,

count:1

},

{

id:3,

name:'鞋子',

pinpai:'耐克',

price:999,

count:1

}]

},

methods:{

totalPrice:function(){

var totalPri = 0;

//总价等于数量乘以数量

for(var i=0;i<this.items.length;i++){

totalPri += this.items[i].price*this.items[i].count;

}

return totalPri;

}

}

});

</script>

</body>

</html>

实现效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 vue实现购物车的监听 的全部内容, 来源链接: utcz.com/p/237207.html

回到顶部