vue笔记之仿购物车案例

责编:menVScode 2017-09-29 1:36 阅读(935)

html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue</title>
	<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
	<div v-if='page=="login"'>
		<h1>登陆</h1>
		用户名:<input type="text" :key='1'>
		密码:<input type="text" :key='2'>
		<br /><br />
		<button @click='page="goods"'>登陆</button>
		<button @click='page=""'>注册</button>
	</div>
	<div v-else-if='page=="goods"'>
		<h2>商品</h2>
		<ul>
			<li v-for='(val,i) in goods'>
				{{ val.name}}  ---- 单价:{{val.price }}
				<button @click='page="info"'>购买</button>
			</li>
		</ul>
	</div>
	<div v-else-if='page=="info"'>
		<p><input type="text" v-model='star'></p>
		评分:<span>{{ score() }}</span><br/>
		<button @click='page="pay"'>结算</button>
	</div>
	<div v-else-if='page=="pay"'>
		<ul>
			<li v-for='item in goods'>
				<p>
					<input @click='changeStatus(item)' name="status" type="checkbox" v-model='item.status'>
					商品名称:{{item.name}}
				</p>
				<p>数量:
					<button @click='calc(0,item)'>-</button>
					<!-- <input type="text" v-model='item.num' /> -->
					<input type="text" :value='item.num || 0' />
					<button @click='calc(1,item)'>+</button>
				</p>
				<p>
					单价:{{item.price}}
					小计:{{ item.price*item.num | smallTotal }} 元
					<!-- 小计:{{ item.price*(item.num?item.num:0) }} 元 -->
				</p>
			</li>
		</ul>
		<p>
			<input type="checkbox" @click='allSelectBtn' v-model='allSelect'>
			总金额:{{ totalMoney }} 元
		</p>
	</div>
	<div v-else>
		<h1>注册</h1>
		<button @click='page="login"'>登陆</button>
	</div>
</div>
</body>
</html>


js代码

var app = new Vue({
	el:'#app',
	data:{
		page:'login',
		goods:[
			{name:'肥皂',price:10,status:false},
			{name:'洗衣粉',price:20,status:false},
			{name:'牙刷',price:30,status:false}
		],
		star:5.9,
		allSelect:false
	},
	filters:{
		smallTotal:function(val){
			//console.log(val);
			if(!val){
				val=0;
			}
			return val;
		}
	},
	methods:{
		score:function(){
			var score = Math.floor(this.star);//获取评分整数部分
			var suns = '';
			for( var i=0; i<score; i++){
				suns+='☀';
			}

			var small = (this.star-score)>0.5 ? '✴' : '⭐';
			suns+=small;
			while(suns.length<10) {
				suns+='⭐';
			}
			return suns;
		},
		calc:function(a,item){
			if(!item.num){
				//往item设置num属性,默认为0
				this.$set(item,'num',0);
			}
			if(a==0){
				item.num--;
				if(item.num<0){
					item.num=0;
				}
			}else if(a==1){
				item.num++;
			}
			//console.log(item.num);
		},
		changeStatus:function(item){
			this.calc(null,item);
			item.status = item.status;

			for( var i in this.goods ){
				if(this.goods[i].status == false){
					this.allSelect = false;
					return false;
				}else{
					this.allSelect = true;
				}
			}		
		},
		allSelectBtn:function(){
			for(var i in this.goods){
				if(!this.goods[i].num){
					//往item设置num属性,默认为0
					this.$set(this.goods[i],'num',0);
				}
			}

			this.allSelect = this.allSelect;

			if(this.allSelect){
				for(var i in this.goods){
					this.goods[i].status = true;
				}
			}else{
				for(var i in this.goods){
					this.goods[i].status = false;
				}
			}
		}
	},
	computed:{
		totalMoney:function(){
			var all = 0;
			for(var i in this.goods){
				if(this.goods[i].status){
					this.goods[i].num = this.goods[i].num?this.goods[i].num:0;
					all += Number(this.goods[i].price*this.goods[i].num);
				}
			}
			return all;
		}
	}
	
});
// menvscode.com

动态效果

GIF

标签: vue 购物车
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码