Vue.js实战第五章练习1答案

最新推荐文章于 2023-06-18 21:37:57 发布

returnadsss

最新推荐文章于 2023-06-18 21:37:57 发布

阅读量2.7k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/returnadsss/article/details/122849024

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

这是一个使用Vue.js编写的购物车应用示例。页面包含一个表格展示商品列表，包括商品名称、单价、购买数量和操作选项。用户可以增加、减少商品数量，全选或移除商品，同时计算总价。代码中还实现了数据绑定、事件监听和计算属性等功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		[v-cloak]{
			display: none;
		}
		table{
			border: 1px solid #e9e9e9;
			border-collapse: collapse;
			border-spacing: 0;
			empty-cells: show;
		}
		th,td{
			padding: 8px 16px;
			border: 1px solid #e9e9e9;
			text-align: left;
		}
		th{
			background: #f7f7f7;
			color: #5c6b77;
			font-weight: 600;
			white-space: nowrap;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<template v-if="list.length">
			<table>
				<thead>
					<tr>
						<th></th>
						<th>商品名称</th>
						<th>商品单价</th>
						<th>购买数量</th>
						<th>操作</th>
						<th><button
							@click="checkAll">全选</button></th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in list">
						<td>{{index+1}}</td>
						<td>{{item.name}}</td>
						<td>{{item.price}}</td>
						<td>
							<button
							@click="handleReduce(index)"
							:disabled="item.count===1">-</button>
							{{item.count}}
							<button @click="handleAdd(index)">+</button>
						</td>
						<td>
							<button @click="handleRemove(index)">移除</button>
						</td>
						<td>
							<input type="checkbox" name="phone"
							:checked="item.checked===true"
							@click="changeCheck(index)"/>
						</td>
					</tr>
				</tbody>
			</table>
			<div>总价:¥{{totalPrice}}</div>
			<div v-else>购物车为空</div>
		</template>
	</div>
	<script src="vue.js"></script>
	<script>
		var app=new Vue({
			el:'#app',
			data:{
				flag:0,
				list:[
				{
					id:1,
					name:'iPhone7',
					price:6188,
					count:1,
					checked:''
				},
				{
					id:2,
					name:'iPad Pro',
					price:5888,
					count:1,
					checked:''
				},
				{
					id:3,
					name:'MacBook Pro',
					price:21488,
					count:1,
					checked:''
				}
				]
			},
			computed:{
				totalPrice:function(){
					var total=0;
					for(var i=0;i<this.list.length;i++){
						var item=this.list[i];
						if(item.checked===true){
						total+=item.price*item.count;
						}
					}
				return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
				}
			},
			methods:{
				handleReduce:function(index){
					if(this.list[index].count===1) return;
					this.list[index].count--;
				},
				handleAdd:function(index){
					this.list[index].count++;
				},
				handleRemove:function(index){
					this.list.splice(index,1);
				},
				changeCheck:function(index){
					this.list[index].checked=this.list[index].checked===''?true:'';
				},
				checkAll:function(){
					if(this.flag===0){
						for(let i=0;i<this.list.length;i++){
						this.list[i].checked=true;
						}
						this.flag=1;
					}else if(this.flag===1){
						for(let i=0;i<this.list.length;i++){
						this.list[i].checked='';
						}
						this.flag=0;
					}
					
				}
			}
		});
	</script>
</body>
</html>