Vue之简单的统计功能

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

shaojia_

4297人浏览 · 2018-08-10 00:35:47

shaojia_ · 2018-08-10 00:35:47 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^