Vue的购物车全选单选计算数量

<!--html主体内容-->

<body>
	<!--<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">首页</h1>
	</header>-->
	<!--最外层div 透明遮罩-->
	<div id="cont">
		<!--居中显示视图-->
		<div class="dislog" style="display: {
   
   {nones}};">
			<!--内容-->
			<div class="dis_cont">
				<div class="cont_dis">
				</div>

				<div class="dis_bott">
					<label class="left_name" onclick="cances()">取消</label>
					<label class="right_name" onclick="submits()">确认</label>

				</div>

			</div>

		</div>
<!--列表-->
		<div id="list" v-for="(item,index) in list">

			<img v-if="item.selected" class="list_icon" @click="radios(index)" src="img/radio_show.png" />
			<img v-else="!item.selected" class="list_icon" @click="radios(index)" src="img/radio_none.png" />

			<img class="list_img" src="img/list_img.png" @click="delerte(index)" />
			<!--列表名称-->
			<label class="list_name">{
   
   {item.name}}</label>
			<!--列表标题-->
			<label class="list_title">{
   
   {item.title}}</label>
			<!--列表价格-->
			<label class="money">{
   
   {item.money}}</label>
		<!--加减功能  文本框数量-->
			<div class="sum_cont">
				<label class="minute" @click="btn_minute(index)">-</label>
				<input class="input" v-model="item.num"  />
				<label class="add" @click="btn_add(index)">+</label>
			</div>
		</div>


		<!--底部固定样式-->
		<div class="bottom">
			<!--已获得数量-->
			<label class="bott_num">已获得：{
   
   {num}}</label>
			<!--总价-->
			<label class="bott_money">总和：{
   
   {money}}</label>
		</div>

	</div>
	<script type="text/javascript" src="js/vue.min.js"></script>
	
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

	<!--<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>-->
	<script>
		var vue = new Vue({
			//作用域#cont
			el: "#cont",
			data: {

				//默认总价
				money: 0,
				//默认总数量
				num: 0,
				//					购物车假数据
				list: [{
					name: "一休哥",
					num: 1,
					money: 10,
					src: "img/list_img.png",
					title: "一休哥",
					selected: true
				}, {
					name: "迪迦",
					num: 1,
					money: 15,
					src: "img/list_img.png",
					title: "迪迦",
					selected: false
				}, {
					name: "琦玉老师",
					num: 1,
					money: 30,
					src: "img/list_img.png",
					title: "其余老师",
					selected: true
				}]
			},
			//初始化加载   显示总价总数量
			created: function() {
				var price = 0;
				var numb = 0;
				var list = this.list;
				for(var i = 0; i < list.length; i++) {
					if(list[i].selected) {
						price += list[i].num * list[i].money;
						numb += list[i].num;
					}
				}
				this.money = price;
				this.num = numb;
				console.log(numb);
				console.log(price);
			},
			methods: {
				//总价总数量方法   方便调用   再次多写了一次[可以跟初始化封装为一个方法]
				hh: function() {
					var price = 0;
					var numb = 0;
					var list = this.list;
					for(var i = 0; i < list.length; i++) {
						if(list[i].selected) {
							price += list[i].num * list[i].money;
							numb += list[i].num;
						}
					}
					this.money = price;
					this.num = numb;
					console.log(numb);
				},
				//删除购物车列表
				delerte: function(index) {
					this.list.splice(index, 1);
				},
				//选中未选中
				radios: function(index) {
					var list = this.list;
					list[index].selected = !list[index].selected;
					this.hh();
					console.log(list[index].selected)
				},
				//添加
				btn_add: function(index) {
					

					var list = this.list;
					var num = list[index].num;
					num = num + 1;
					list[index].num = num;
					this.hh();
				},
				//减去
				btn_minute: function(index) {
					var list = this.list;
					var num = list[index].num;
					if(num > 1) {
						num = num - 1;
						list[index].num = num;
					}
					this.hh();
				},
				
			}
		})
	</script>
</body>

Vue的购物车全选单选计算数量

猜你喜欢