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

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><st

returnadsss

2819人浏览 · 2022-02-09 20:17:00

returnadsss · 2022-02-09 20:17:00 发布

<!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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^