js添加删除购物车结算特效代码下载



6 23 8



特效描述:添加删除 购物车结算,js添加删除购物车结算特效代码下载

代码结构

1. 引入JS

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

2. HTML代码

<div id="app">
	<ul>
		<li class="clearfix" v-for="(item,index) in list" :key="item.id">
			<input type="checkbox" class="fl minInput" v-model="item.pd" @click="itemClick(index)">
			<img :src="item.imgUrl" class="fl" :class="{active:item.isActive}">
			<span class="fl">{{item.price.toFixed(2)}}</span>
			<div class="priceFrom clearfix fl">
				<span class="fl" @click="item.num++">+</span>
				<input class="fl" type="text" v-model="item.num" />
				<span class="fl" @click="item.num<=0?0:item.num--">-</span>
			</div>
			<span class="fl">{{item.num*item.price|priceNum}}</span>
			<span class="fl" style="color:red;margin-left:5px;" @click="deleteClick(index)">删除</span>
		</li>
	</ul>
	<div class="footer">
		<input type="checkbox" @click="totalClick" v-model="totalInt">全选
		<div class="goodsNum">
			已选商品 <span style="margin:0px 5px;">{{goodsNum}}</span>件 合计:
			<span style="margin:0px 5px;">{{totalNum}}</span>元
		</div>
	</div>
</div>
<script>
	var app = new Vue({
		el: "#app",
		data() {
			return {
				num: null,
				list: [
					{ id: 0, imgUrl:'img/jt1.jpg',price: 2,num: 1, pd: false,isActive:false },
					{ id: 1, imgUrl:'img/jt2.jpg',price: 4,num: 1, pd: false,isActive:false },
					{ id: 2, imgUrl:'img/jt3.jpg',price: 5,num: 1, pd: false,isActive:false },
					{ id: 3, imgUrl:'img/jt4.jpg',price: 3,num: 1, pd: false,isActive:false },
					{ id: 4, imgUrl:'img/jt5.jpg',price: 6,num: 1, pd: false,isActive:false }
				],
				totalInt:false,
				newList:[]
			}
		},
		filters: {
			priceNum: function(val) {
				return val.toFixed(2)
			}
		},
		computed:{
			totalNum:function(){
				var total=0;
				for(var i in this.newList){
					if(this.newList[i].pd){
						total+=this.newList[i].price*this.newList[i].num
					}else{
						total=0
					}
				}
				return total.toFixed(2)
			},
			goodsNum:function(){
				var goods=0;
				for(var i in this.newList){
					if(this.newList[i].pd){
						goods+=this.newList[i].num;
					}
				}
				return goods
			}
		},
		methods: {
			deleteClick(index) {
				if(this.list[index].pd){
					this.list.splice(index,1);
					this.newList.splice(index,1)
				}else{
					alert('请先选择删除的选项')
				}
			},
			totalClick(){
				this.totalInt=!this.totalInt
				if(this.totalInt){
					for(var i in this.list){
						this.list[i].pd=true;
						this.list[i].isActive=true
						if(this.list[i].pd){
							this.newList.push(this.list[i]);
						}
					}
				}else{
					for(var i in this.list){
						this.list[i].pd=false;
						this.newList=[];
						this.list[i].isActive=false
					}
				}
			},
			itemClick(index){
				this.list[index].pd=!this.list[index].pd
				if(this.list[index].pd){
					this.newList.push(this.list[index]);
					this.list[index].isActive=true;
				}else{
					for(var i in this.newList){
						if(this.newList[i].pd==false){
							this.newList.splice(i,1)
						}
					}
					this.list[index].isActive=false;
				}
				if(this.newList.length==this.list.length){
					this.totalInt=true;
				}else{
					this.totalInt=false;
				}
			}
		}
	})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片头像上传 文件上传 文本框 下拉框 复选 单选 登录框 注册框 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 切换按钮 form表单

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到