vue改进版购物车

最新推荐文章于 2022-06-30 09:57:28 发布

Ensoleile2021

最新推荐文章于 2022-06-30 09:57:28 发布

阅读量60

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_51525398/article/details/120867085

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.upBox{
				width: 200px;
				height: 200px;
				background-color:lightpink;
				position: absolute;
				left: 0;right: 0;top: 0;bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div id="shopcar">
			<div id="">
				编号:<input type="text" value="" v-model="newBook.id"/><br>
				书名:<input type="text" value="" v-model="newBook.name"/><br>
				作者:<input type="text" value="" v-model="newBook.author"/><br>
				价格:<input type="text" value="" v-model="newBook.price"/><br>
				<input type="button" value="增加" @click="addBook"/>
				<!-- 增加商品按钮，双向绑定-->
			</div>
			<p>
				&nbsp;
			</p>
			<div class="upBox" v-show="isShow">
				编号:<input type="text" value="" v-model="upDateBook.upid"/><br>
				书名:<input type="text" value="" v-model="upDateBook.upname"/><br>
				作者:<input type="text" value="" v-model="upDateBook.upauthor"/><br>
				价格:<input type="text" value=""  v-model="upDateBook.upprice"/><br>
				<input type="button" value="保存" @click="saveMessage"/>
				<input type="button" value="取消" @click="cancel"/>
				<!-- 修改商品的弹出框，默认隐藏，需要时显示 -->
			</div>
			<!-- 主表，实现删除修改功能 -->
			<table>
				<tr>
					<td>编号</td>
					<td>书名</td>
					<td>作者</td>
					<td>价格</td>
					<td>删除</td>
					<td>操作</td>
				</tr>
				<tr v-for="(books,index) in book" :key="book.id">
					<td>{{books.id}}</td>
					<td>{{books.name}}</td>
					<td>{{books.author}}</td>
					<td>{{books.price}}</td>
					<td><input type="button" value="删除" @click="delBook(index)"/></td>
					<td><input type="button" value="修改" @click="updateBook(index)"/></td>
					<!-- 主表修改删除按钮需要传参，循环出来的TR用index确定需要变动哪一行 -->
				</tr>
			</table>
		</div>
	</body>
</html>
<script type="text/javascript">
	// 1.数据渲染
	// 2.实现增加功能（双向绑定）（数组对象）（push）(清空输入框)
	// 3.删除商品（传参）
	// 4.修改商品（传参）（确认保存、取消）（显示添加单）（获取到商品信息赋值给添加单）
</script>
<script src="../01code/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let vm=new Vue({
		el:"#shopcar",
		data:{
			isShow:false,
			upIndex:-1,
			// 设置无效的index值
			upDateBook:{
				upid:"",
				upname:"",
				upauthor:"",
				upprice:"newBook"
			},
			newBook:{
				id:"",
				name:"",
				author:"",
				price:""
			},
			book:[
				{
					id:"001",
					name:"大学",
					author:"曾子",
					price:"80"
				},
				{
					id:"002",
					name:"中庸",
					author:"子思",
					price:"90"
				},
				{
					id:"003",
					name:"论语",
					author:"孔子",
					price:"100"
				},
			]
		},
		methods:{
			addBook(){
				this.book.push(this.newBook);
				// 清空输入框
				this.newBook={
					id:"",
					name:"",
					author:"",
					price:""
				}
			},
			delBook(index){
				this.book.splice(index,1);
			},
			updateBook(index){
				this.isShow=true;
				// 显示修改弹出框
				this.upIndex=index;
				// 保存信息时用index下标赋值
				this.upDateBook.upid=this.book[index].id;
				this.upDateBook.upname=this.book[index].name;
				this.upDateBook.upauthor=this.book[index].author;
				this.upDateBook.upprice=this.book[index].price;
				// 将主表中的数据赋值给弹出的修改框重
			},
			saveMessage(){
				this.isShow=false;
				// index为局部变量，此处无法访问
				this.book[this.upIndex].id=this.upDateBook.upid;
				this.book[this.upIndex].name=this.upDateBook.upname;
				this.book[this.upIndex].author=this.upDateBook.upauthor;
				this.book[this.upIndex].price=this.upDateBook.upprice;	
				// 点击保存按钮，隐藏修改框，将修改框中的数据赋值给主表
			},
			cancel(){
				this.isShow=false;
			}
		}
	});
</script>

Ensoleile2021

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue改进版购物车

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .upBox{ width: 200px; height: 200px; background-color:lightpink; position: absolute; left:
复制链接

扫一扫