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

最新推荐文章于 2024-06-05 20:43:04 发布

returnadsss

最新推荐文章于 2024-06-05 20:43:04 发布

阅读量1.3k

点赞数 2

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

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

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

本来看网上有实现方法，不怎么想写的，但网上的答案都有点问题，题目的意思是使用二维数组实现，但网上的答案实际上还是使用对象的数组来实现，如https://blog.csdn.net/Clara_G/article/details/89840364
使用的是类似这样的形式[{name:“a”,{},{}},…]，其实不必，可以使用二维数组，形式是这样的[[{},{}],…],这样才是使用二维数组实现。代码如下。

<!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 v-for="(tableItem,tableIndex) in list">
				<thead>
					<tr>
						<th>{{goods[tableIndex]}}</th>
						<th>商品名称</th>
						<th>商品单价</th>
						<th>购买数量</th>
						<th>操作</th>
						<th><button
							@click="checkAll(tableIndex)">全选</button></th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in list[tableIndex]">
						<td>{{index+1}}</td>
						<td>{{item.name}}</td>
						<td>{{item.price}}</td>
						<td>
							<button
							@click="handleReduce(tableIndex,index)"
							:disabled="item.count===1">-</button>
							{{item.count}}
							<button @click="handleAdd(tableIndex,index)">+</button>
						</td>
						<td>
							<button @click="handleRemove(tableIndex,index)">移除</button>
						</td>
						<td>
							<input type="checkbox"
							:checked="item.checked===true"
							@click="changeCheck(tableIndex,index)"/>
						</td>
					</tr>
				</tbody>
			</table>
		<div>总价:¥{{totalPrice}}</div>
		</template>
		<div v-else>购物车为空</div>
	</div>
	<script src="vue.js"></script>
	<script>
		var app=new Vue({
			el:'#app',
			data:{
				goods:["电子产品","生活用品","果蔬"],
				flag:[0,0,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:''
				}
				],
				[
				{
					id:1,
					name:'脸盆',
					price:20,
					count:1,
					checked:''
				},
				{
					id:2,
					name:'牙膏',
					price:5,
					count:1,
					checked:''
				},
				{
					id:3,
					name:'牙杯',
					price:10,
					count:1,
					checked:''
				}
				],
				[
				{
					id:1,
					name:'苹果',
					price:5,
					count:1,
					checked:''
				},
				{
					id:2,
					name:'荔枝',
					price:7,
					count:1,
					checked:''
				},
				{
					id:3,
					name:'橘子',
					price:10,
					count:1,
					checked:''
				}
				]
				]
			},
			computed:{
				totalPrice:function(){
					var total=0;
					for(var i=0;i<this.list.length;i++){
						for(var j=0;j<this.list[i].length;j++){
							let item=this.list[i][j];
							if(item.checked===true){
							total+=item.price*item.count;
							}
						}
					}
					return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
				}
			},
			methods:{
				handleReduce:function(tableIndex,index){
					if(this.list[tableIndex][index].count===1) return;
					this.list[tableIndex][index].count--;
				},
				handleAdd:function(tableIndex,index){
					this.list[tableIndex][index].count++;
				},
				handleRemove:function(tableIndex,index){
					this.list[tableIndex].splice(index,1);
				},
				changeCheck:function(tableIndex,index){
					this.list[tableIndex][index].checked=this.list[tableIndex][index].checked===''?true:'';
					/*Vue.set(list[tableIndex][index],checke,true);*/
				},
				checkAll:function(tableIndex){
					if(this.flag[tableIndex]===0){
						for(let i=0;i<this.list[tableIndex].length;i++){
						this.list[tableIndex][i].checked=true;
						}
						this.flag[tableIndex]=1;
					}else if(this.flag[tableIndex]===1){
						for(let i=0;i<this.list[tableIndex].length;i++){
						this.list[tableIndex][i].checked='';
						}
						this.flag[tableIndex]=0;
					}
					
				}
			}
		});
	</script>
</body>
</html>

returnadsss

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
Vue.js实战第五章练习2答案

本来看网上有实现方法，不怎么想写的，但网上的答案都有点问题，题目的意思是使用二维数组实现，但网上的答案实际上还是使用对象的数组来实现，如https://blog.csdn.net/Clara_G/article/details/89840364使用的是类似这样的形式[{name:“a”,{},{}},…]，其实不必，可以使用二维数组，形式是这样的[[{},{}],…],这样才是使用二维数组实现。代码如下。<!DOCTYPE html><html lang="en"><h
复制链接

扫一扫