Vue实现简单的列表金额计算效果（简易购物车）
Vue实现简单的列表金额计算效果（简易购物车）
Arebirth
发布于 2020-06-19 15:04:54
发布于 2020-06-19 15:04:54
效果图：
使用技术：v-for v-bind v-on实现简单的列表选中绑定操作
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.green {
background: greenyellow;
border-radius: 5px;
}
.pink {
background: deeppink;
border-radius: 5px;
}
#box {
border-radius: 5px;
font-family: 黑体;
width: 300px;
height: 400px;
background: cadetblue;
}
.item {
text-align: center;
width: 240px;
height: 40px;
margin-top: 10px;
line-height: 40px;
}
</style>
</head>
<body>
<div id="box" align="center">
<h1 style="padding-top: 20px;">Services</h1>
<div class="item s1" v-for="(item,index) in cart" v-on:click="ok(index)" v-bind:class="{pink:!item.bol, green:item.bol}">
<p>{{ item.name }} ------ {{ item.price }}--{{ item.bol }}</p>
</div>
<hr>
<p style="float: left;margin-left: 50px;">Total:</p>
<p style="float: right;margin-right: 50px;">{{ total }}</p>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#box',
data: {
cart: [{
name: 'Computer',
price: 5000,
bol: false
},
{
name: 'Keybord',
price: 200,
bol: false
},
{
name: 'Mouse',
price: 20,
bol: false
},
{
name: 'Disk',
price: 2000,
bol: false
},
],
total: 0
},
methods: {
ok: function(index) {
this.cart[index].bol = !this.cart[index].bol
this.total = 0
for (var i = 0; i < this.cart.length; i++) {
if (this.cart[i].bol)
this.total += this.cart[i].price
}
}
}
})
</script>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-10-01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录