（二）VUE列表渲染、简易购物车原理

最新推荐文章于 2024-03-05 18:17:44 发布

luck_lin

最新推荐文章于 2024-03-05 18:17:44 发布

阅读量383

点赞数 1

分类专栏： frame class 文章标签： vue

本文链接：https://blog.csdn.net/qwe502763576/article/details/79991929

版权

frame class 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<style type="text/css">
	.shouqing{
		color:#ccc;
	}
	a{
		color: inherit;
	}
</style>
<body>
	<div id="app">
		<ul>
			<li v-for="pro in products" :key="pro.id" :class="{shouqing: pro.count === 0}">
				<input type="checkbox" :value="pro.tit" v-model="check" :disabled="pro.count === 0">
				<input type="text" v-model.number="pro.count" :disabled="pro.count === 0">
				<input type="button" value="-" :disabled="pro.count === 0" @click="countSub(pro, $event)">
				{{pro.tit}}
				<span v-if="pro.count === 0">售罄！</span>
				<input type="button" value="+" :disabled="pro.count === 0" @click="countAdd(pro, $event)">
				 <i>{{pro.price}}</i> 
				小计：<em>{{(pro.price*pro.count).toFixed(2)}}</em>
				<a href="" @click.prevent="deletePro(pro)">删除</a>
			</li>
		</ul>
		全选：<input type="checkbox" @click="allCheck" > 合计：<span>{{totalPrice.toFixed(2)}}</span>
		<div>sum:{{calcSum}}</div>
		
	</div>

</body>
<script>

	var app = new Vue({
		el: "#app",
		data: {
			products: [{
				id: 0, tit: "Lebron James", count: 0, price: 9.9
			},{
				id: 1, tit: "Anthony", count: 5, price: 9.8
			},{
				id: 2, tit: "wade", count: 9, price: 6.6
			},{
				id: 3, tit: "Jordan", count: 3, price: 7.9
			}],
			check: ['Anthony']
		},
		computed: {
			calcSum(){
				return this.products.reduce((total, curr)=>{
					return total + curr.count;
				}, 0)//传递给函数的初始值，意思就是total初始设为0，不过不指定第二个参数，则total初始值为数组中第一项的值
			},
			totalPrice(){
				return this.products.reduce((price, curr)=>{
					return price + curr.price * curr.count
				}, 0)
			}
		},
		methods: {
			countAdd(pro){
				pro.count++
			},
			countSub(pro, e){
				pro.count--
				if(pro.count === 1){
					e.target.disabled = true;
				}
			},
			allCheck(e){
				if(e.target.checked === true){
					return this.products.reduce((re, v)=>{
						if(this.check.indexOf(v.tit) === -1)//数组中有的tit就不push了
							return this.check.push(v.tit);
					}, 0)
				}else{
					this.check = [];
				}
			},
			deletePro(pro){
				this.products.splice(this.products.indexOf(pro), 1)
			}
		},
		watch: {
		    products: {
		    	handler(currval, nextval){ //监听到变化时应该执行的函数。参数第一个是改变后的值(原数据)，第二个是改变后的值的深拷贝。 
		    		// console.log(currval == nextval)//false
		    		// console.log(currval == this.products)//true
		    		// console.log(nextval == this.products)//false
			    },
				deep: true,//其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
				immediate: true//其值是true或false；确认是否以当前的初始值执行handler的函数。
		    }

		},
		updated(){
			console.log("update",this.check)
		}
	})
</script>
</html>