Vue之简单的统计功能

最新推荐文章于 2024-03-04 13:18:44 发布

shaojia_

最新推荐文章于 2024-03-04 13:18:44 发布

阅读量4.2k

点赞数

分类专栏： vue 前端之路文章标签： vue统计

本文链接：https://blog.csdn.net/a271720559/article/details/81546317

版权

前端之路同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

Vue之简单的统计功能

今天我们来看看vue怎么实现简单的统计价格功能。

效果图：

最后的价格自动根据选择的项目来计算最终价格。

1.首先绑定每个项目绑定class 如果选中则增加样式active，改变背景颜色 :class="{'active':item.active}"

2.写计算事件，过滤掉集合中未选中的项目，在循环集合计算总价格。

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
ul li{
	list-style: none;
	width: 200px;
	background-color: #e35885;
	margin-top: 5px;
	height: 40px;
	padding: 5px;
}
ul li strong{
	float: left;
	font-size: 20px;
}
ul li span{
	float: right;
	font-size: 20px;
	
}
ul li.active{
    background-color:#8ec16d;
}
</style>
<script src="vue.min.js"></script>
<body>
	<div id="test">
		<h1>Total</h1>
		<ul>
			<li v-for="item in phoneList" @click="item.active=!item.active" :class="{'active':item.active}"><strong>{{item.name}}</strong><span>{{item.price}}</span></li>
			
		</ul>
		<h1>FinalPrice:{{getTotal.totalPrice}}</h1>
	</div>
</body>
<script >
	new Vue({
		el : "#test",
		data : {
			phoneList:[
				{
					name:'apple',
					price : 5000,
					active :true
				},
				{
					name:'mi',
					price : 3000,
					active :false
				},
				{
					name:'sang',
					price : 4000,
					active :false
				},
				{
					name:'onePlus',
					price : 3500,
					active :false
				},
				{
					name:'oppo',
					price : 2000,
					active :false
				}
			]
		},
		computed:{
			getTotal :function(){
				var entry = this.phoneList.filter(function(val){return val.active})
				totalPrice = 0;
				for (var i = 0,len = entry.length; i < len; i++) {
					totalPrice +=entry[i].price;
				}
				return {totalPrice:totalPrice};
			}
		}
	})
</script>
</html>

shaojia_

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue之简单的统计功能

Vue之简单的统计功能今天我们来看看vue怎么实现简单的统计价格功能。效果图：最后的价格自动根据选择的项目来计算最终价格。1.首先绑定每个项目绑定class 如果选中则增加样式active，改变背景颜色 :class="{'active':item.active}"2.写计算事件，过滤掉集合中未选中的项...
复制链接

扫一扫