vue小练习之购物车实现

今天从网上找了一个购物车的小例子,照着敲了一下,收获不少。下面的用一个小动图展示一下成果:
vue小练习之购物车实现_第1张图片
接下来上代码:


<html>
	<head>
		<meta charset="UTF-8">
		<link href="css/shoppingcart.css" rel="stylesheet" type="text/css" />
		<title>title>
	head>
	<body>
		<div id="app">
			<h2>购物清单h2>
			<div class="nav">
				<div><span class="noselected" v-bind:class="{selected:ifAllselect}" @click="allSelect(ifAllselect)">span>全选div>
				<div>商品div>
				<div>数量div>
				<div>单价(元)div>
				<div>金额(元)div>
				<div>操作div>
			div>
			<table class="goods">
				<tbody>
					<tr v-for="(item,index) in goods">
						<td><span class="noselected" v-bind:class="{selected:item.isSelect}" @click="item.isSelect=!item.isSelect">span>td>
						<td>
						<div class="good" >
					        <img v-bind:src='item.gimg' />
					            <div>
					         	<h3>{{item.gname}}h3>
					        	<span>{{item.gbrand}}   {{item.gplace}}span><br />
					        	<span>{{item.gpurity}}   {{item.gminnum}}span><br />
					        	<span>{{item.gstore}}span>
				            	div>
				        div>
						td>
						<td><input type="number" v-model="item.gnum" min="0"/>td>
						<td><span>¥{{item.gprice}}span>td>
						<td><span>¥{{item.gprice*item.gnum}}span>td>
						<td><button @click="deleteSingle(index)">删除button>td>
					tr>
				tbody>
			table>
			<div class="footer">
				<button @click="deleteSel">删除所选商品button>
				<button>继续购物button>
				<span><span>{{getTotal.num}}span>件商品(不含运费)总计:<span>¥{{getTotal.allprice}}span>span>
				<button>去结算button>
			div>
			div>
		div>
	body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{	
				goods:[
				{gname:'佳洁士美白牙膏',
				 gbrand:'品牌:佳洁士',
				 gplace:'产地:上海',
				 gpurity:'规格:120g',
				 gminnum:'起订量:10件',
				 gstore:'仓库地:上海沧海仓储',
				 gprice:'800',
				 gimg:'img/good.jpg',
				 gnum:'3',
				 isSelect:false,
				},
				{gname:'佳洁士美白牙膏',
				 gbrand:'品牌:佳洁士',
				 gplace:'产地:上海',
				 gpurity:'规格:120g',
				 gminnum:'起订量:10件',
				 gstore:'仓库地:上海沧海仓储',
				 gimg:'img/good.jpg',
				 gprice:'400',
				 gnum:'5',
				 isSelect:false,	 
				}
				]		
		},
		computed:{
			//实时判断是否全选
			ifAllselect:function(){
					var all;
					for(var i=0;i<this.goods.length;i++){
						if(this.goods[i].isSelect==false){
							all=false;
							break;
						}
						all=true;
					}
					return all;
			},
			//获取总件数和总金额数
			getTotal:function(){
				var num= 0 ;
				var allprice=0;
				for(var i=0;i<this.goods.length;i++){
					if(this.goods[i].isSelect==true){
						num=parseInt(num)+parseInt(this.goods[i].gnum);
						allprice=allprice+this.goods[i].gnum*this.goods[i].gprice;
					}
				}
				return{num:num,allprice:allprice}
			}
		},
			methods:{
				//全选或者取消全部选中
				allSelect:function(ifAllselect){
					for(var i=0;i<this.goods.length;i++){
						this.goods[i].isSelect=!ifAllselect;
					}
				},
				//删除单个商品
				deleteSingle:function(index){
					if(this.goods[index].isSelect==true)
					this.goods.splice(index,1);
					else alert('请选择您要删除的商品!');
				},
			 //删除选中的商品
			 deleteSel:function(){
			 	this.goods=this.goods.filter(function(item){return !item.isSelect})
			 }
			}
		})
	script>
html>

*{
	padding: 0;
	margin: 0;
}
html,body{
	width: 100%;
	overflow-x:hidden ;
}
#app{
	width: 90%;
	margin: 50px auto;
	border: 1px solid gainsboro;
	border-top: none;
}
h2{  
	display: block;
	border-top: 4px solid dodgerblue;
	font-size: 17px;
	padding-left: 20px;
	line-height: 50px;
	color: dodgerblue;
}
.nav{
	width: 100%;
	height: 40px;
	border:1px solid gainsboro ;
	border-left:none ;
	border-right: none;
}
.nav>div{
	height: 100%;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
}
.nav div:nth-child(1){
	width: 15%;
}
.nav div:nth-child(2){
	width:37%;
}
.nav div:nth-child(3){
	width: 12%;
}
.nav div:nth-child(4){
	width: 12%;
}
.nav div:nth-child(5){
	width: 12%;
}
.nav div:nth-child(6){
	width: 12%;
	}
.noselected{
	display: inline-block;
	width: 17px; 
	height:17px;
	margin-right: 5px;
	background: url(../img/nocheck.png) no-repeat;
	background-size: contain;
}
.goods{
	width: 100%;
	height: auto;
}
.goods tr{
	width: 100%;
}
.goods tr td{
	padding: 20px 0;
}
.goods tr>td:nth-child(1){
	width: 17%;
	text-align: center;
}
.goods tr>td:nth-child(2){
	width: 35%;
}
.goods tr>td:nth-child(3){
	width: 12%;
	text-align: center;
}
.goods tr>td:nth-child(4){
	width: 12%;
	text-align: center;
}
.goods tr>td:nth-child(5){
	width: 12%;
	text-align: center;
}
.goods tr>td:nth-child(6){
	width: 12%;
	text-align: center;
}
.good{
	width: 100%;
	display: flex;
	align-items: center;
}
.good img{
    width:120px;
    height: 120px;
    float: left;
    border: 2px solid gainsboro;
    margin-right: 30px;
}
.good>div{
	font-size: 13px;
	line-height: 20px;
}
.good>div h3{
	font-size: 11px;
	margin-bottom: 5px;
}
.goods input[type=number]{
	width: 50px;
}
.goods tr td:nth-child(4),.goods tr td:nth-child(5){
	color: red;
}
button{
	cursor: pointer;
	border: none;
	outline: none;
	background-color: white;
}
.footer{
	display: flex;
	align-items: center;
	width: 100%;
	height: 50px;
	background-color: #F7F7F7;
     position: relative;
}
.footer button{
	border: none;
	background-color: #F7F7F7;	
	font-size: 15px;
}
.footer button:nth-child(1){
	margin-left: 30px;
}
.footer button:nth-child(2){
	margin-left: 60px;
}
.footer button:nth-child(4){
	height: 100%;
	position: absolute;
	right: 0;
	padding:0 20px;
	background-color: orange;
}
.footer>span{
	position: absolute;
	right: 100px;
}
.footer>span span{
	color: red;
}
.selected{
	background: url(../img/check.png) no-repeat;
	background-size: contain;
}

以上为所有的html和css文件代码。
【总结】
1、computed:此处用computed主要有两个作用。一是判断是否全选。如果全选则添加selected这一class,如果没有则不添加;二是计算选择的总商品数和总金额。当用户更改商品数量时,总商品数和总金额也随之改变。
2、return返回两个值:第一次接触function里边return的值是两个这种情况,这种要通过对象的属性访问方法。例如:

function add(a,b){
    var sum;
    var sub
    return{
      sum:a+b,
      sub:a-b
    }
  }
  var obj = add(5,2);
  console.log(obj.sum);
  console.log(obj.sub);

3、js的数组方法filter():
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。

array.filter(function(currentValue,index,arr), thisValue)
  • currentValue: 必须。当前元素的值

  • index: 可选。当前元素的索引值

  • arr:可选。当前元素属于的数组对象

  • thisValue:可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”

你可能感兴趣的:(vue)