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


js添加删除购物车结算特效代码下载
js添加删除购物车结算特效代码下载以及添加删除、购物车结算等js/jquery网页特效代码下载。

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>

相关推荐

发表评论

相关文章