Vue简单版购物车

最新推荐文章于 2024-07-06 18:15:35 发布

╰烟消云散

最新推荐文章于 2024-07-06 18:15:35 发布

阅读量627

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_45384482/article/details/108067937

版权

文章目录

实现效果

基于静态的数据配合computed计算属性完成了简易版的购物车、实现了全选反选、删除、价格随数量自动变化，话不多说直接上效果图。
在这里插入图片描述

关键点

Computed中get 和set

get()

方法是默认调用的

get:function (){
       return this.jsond.every(d=>d.isSelected);
}

set()

只有当computed监测的值变化的时候,set才回被调用

 set:function (val){
	//val属于boolean值，相当于是否选中
        this.jsond.forEach(d=>d.isSelected=val);
		console.log("监测值发生变化...")
    }

every()

判断数组中是否每个元素都满足条件

只有都满足条件才返回true；

只要有一个不满足就返回false；

reduce()

数组方法 reduce 用来迭代一个数组，并且把它累积到一个值中

prev:上一次回调的处理结果

next:对应的是数组本身

//求总价
	sum:{
	    get(){
	        return this.jsond.reduce((prev,next)=>{
	            if(!next.isSelected){
					console.log("取消选中....")
					//当前对象取消选中就返回上一次选中的值
	                return prev;
	            }
				console.log("选中.....")
				//上一次选中的值加....
	            return prev+next.price*next.num;
				
	        },0)
	    }
	}

静态数据的增加

this.jsond.push({	键值对})

静态数据的删除

del(v) {  
	  this.jsond.splice(v, 1) 
   }

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<!--  Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >
	</head>
	<body>
		<div id="app">
			<div class="container">
			    <div class="rows">
			        <table class="table table-bordered">
			            <caption style="margin-left: 510px;"><h1>购物车</h1> </caption>
			            <tr>
			                <td><input type="checkbox"  v-model="checkboxAll">全选</td>
			                <td>商品</td>
			                <td>描述</td>
			                <td>价格</td>
			                <td>数量</td>
			                <td>小计</td>
			                <td><button class="btn btn-danger">操作</button></td>
			            </tr>
			            <tr v-for="(json,index)  in jsond">
							 <td><input type="checkbox" v-model="json.isSelected" ></td>
							 <td ><img :src="json.image" style="width: 50px;height: 50px;"></td>
							 <td >{{json.title}}</td>
							 <td >{{json.price|c(2)}}</td>
							 <td><input v-model="json.num" /></td>
							 <td >{{json.price*json.num|c(2)}}</td>
							 <td><button class="btn btn-danger" @click="del(json)">删除</button></td>
						</tr>
			            <tr>
			                <td callspan="6">总价：{{sum|c(2)}}</td>
			            </tr>
			        </table>
			</div>
			</div>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//全局过滤器，控制精度
			Vue.filter('c',function(input,param){
				return input.toFixed(param);
			})
			const app=	new Vue({
					el:"#app",
					data:{
						jsond:[
							{
								isSelected:false,
								image:"https://img14.360buyimg.com/n0/jfs/t1/136938/21/3252/303369/5ef9b1cfEcb95f0ba/61d6dc26b2be1e52.jpg",
								title:"Nightwish 拉维斯 单板民谣吉他面单木吉他41寸吉它初学者乐器 米维斯S 云杉原木色 41寸",
								price:699.00,
								num:1
							},
							{
								isSelected:false,
								image:"https://img14.360buyimg.com/n0/jfs/t1/150100/32/4436/100785/5f27e95dE9abe7fd4/74011ebd0e036aa1.jpg",
								title:"Brook 布鲁克吉他单板民谣吉他S25面单木吉他41寸吉它初学者乐器 S25N-DCG原木色 41寸缺角",
								price:1580.5311,
								num:15
							}
						]
					},
					computed:{
						//vue实现全选和反选，使用vue的computed的set方法实现双向绑定 
						//注意checkboxAll放置computed里面的第一个，因为受渲染关系前后的影响
						checkboxAll:{
						    get:function (){
						        return this.jsond.every(d=>d.isSelected);
						    },
						    set:function (val){
								//val属于boolean值，相当于是否选中
						        this.jsond.forEach(d=>d.isSelected=val);
								console.log("监测值发生变化...")
						    }
						},
						//求总价
						sum:{
						    get(){
						        return this.jsond.reduce((prev,next)=>{
						            if(!next.isSelected){
										console.log("取消选中....")
										//当前对象取消选中就返回上一次选中的值
						                return prev;
						            }
									console.log("选中.....")
									//上一次选中的值加....
						            return prev+next.price*next.num;
									
						        },0)
						    }
						}
						
					},
					methods: {
						del(v) {  //删除数据
						   if(confirm('确定要删除？')){
							  this.jsond.splice(v, 1) 
						   }
						}
						/* ,add() { //添加死数据:了解即可
							this.jsond.push({
								键值对
							})
						} */
					}
					
				})
		</script>
		
	</body>
</html>