Vue2简易购物车

最新推荐文章于 2024-05-03 17:26:07 发布

天下青山都一样

最新推荐文章于 2024-05-03 17:26:07 发布

阅读量359

点赞数 1

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/lw934934/article/details/125945087

版权

Vue.js 购物车数据绑定事件处理状态管理

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
		<style type="text/css">
			table{
				width: 400px;
			}
			.yellow{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="shopping">
				<table border="3px" cellspacing="" cellpadding="" >
					<tr>
						<th>名称</th>
						<th>价格</th>
						<th>数量</th>
						<th>操作</th>
					</tr>
					<tr v-for="(item,index) in arr" :class="{'yellow':item.num>0}">
						<td >{{arr[index].name}}</td>
						<td>￥{{arr[index].pri}}</td>
						<td>
							<button type="button"v-if="arr[index].num==hide?hide:true" @click="jian(item,index)" v-else="0">-</button>
							{{arr[index].num}}
							<button type="button" @click="jia(item,index)">+</button>
							</td>
						<td>
							<button type="button" @click="sw(item,index)">编辑</button>
							<button type="button" @click="del">删除</button>
						</td>
					</tr>
					<tr>
						<td></td>
						<td>总价：{{zpri()}}</td>
						<td>总数量：{{num()}}</td>
						<td></td>
					</tr>
				</table>
				
				<button type="button" @click="show">添加商品</button>
				<button type="button" v-show="sh" @click="show">取消</button>
				<input type="text" v-show="sh" v-model="val"/>
				<input type="text" v-show="sh" v-model="vala"/>
				<button type="button" v-show="sh" @click="chuan">确认</button>
				<div class="" v-show="so" >
					<button type="button" @click="sw">取消</button>
					<input type="text" name="" id="" value="" v-model="va"/>
					<input type="text" name="" id="" value="" v-model="vl"/>
					<button type="button" @click="cfi(ix)">确认</button>
				</div>
		</div>
			<script type="text/javascript">
				var app = new Vue({
					el:'#shopping',
					data(){
						return{
							sh:false,
							so:false,
							val:'',
							vala:'',
							className:'yellow',
							arr:[
								{
									"name":111,
									"pri":10,
									"num":0,
								},
								{
									"name":222,
									"pri":20,
									"num":0,
								},
							],
							hide:false,
							sho:true,
							price:0,
							znum:0,
							va:'',
							vl:'',
							ix:'',
						}
					},
					
					methods:{
						
						show(){
							this.sh=!this.sh;
						},
						sw(item,index){
							this.so=!this.so;
							this.va=this.arr[index].name;
							this.vl=this.arr[index].pri;
							this.ix=index;
						},
						cfi(ix){
								this.arr[ix].name=this.va;
								this.arr[ix].pri=this.vl;
							
						},
						chuan(){
							this.arr.push({
								"name":this.val,
								"pri":this.vala,
								"num":0,
							})
							console.log(this.arr);
						},
						
						jian(item,index){
							this.arr[index].num--;
						},
						jia(item,index){
							this.arr[index].num++;
						},
						num(){
							var nu=0;
							for(let i=0;i<this.arr.length;i++){
								nu+=this.arr[i].num
							}
							return nu;
						},
						zpri(){
							var zp=0;
							for(let i=0;i<this.arr.length;i++){
								zp+=this.arr[i].num*this.arr[i].pri
							}
							return zp;
						},
						del(item,index){
							this.arr.splice(index,1);
						}
						
						
					},
					

					
				})
			</script>
	</body>
</html>