vue实现购物车增删改

最新推荐文章于 2022-10-15 22:22:25 发布

Ensoleile2021

最新推荐文章于 2022-10-15 22:22:25 发布

阅读量418

点赞数

文章标签： vue

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

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.upBox{
				width:300px;
				height:300px;
				position: absolute;
				left: 0;top: 0;bottom: 0;right: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				编号：<input type="text" v-model="id" /><br>
				书名：<input type="text" v-model="name" /><br>
				作者：<input type="text" v-model="author" /><br>
				价格：<input type="text" v-model="price" /><br>
				<input type="button"  value="添加" @click="add"/>
			</div>
			<div class="upBox" v-show="isShowBox">
				编号：<input type="text" v-model="upid" /><br>
				书名：<input type="text" v-model="upname" /><br>
				作者：<input type="text" v-model="upauthor" /><br>
				价格：<input type="text" v-model="upprice" /><br>
				<input type="button"  value="添加" @click="addBook"/>
				<input type="button" value="取消" @click="cancel"/>
			</div>
			<hr >
			<table>
				<tr>
					<td>编号</td>
					<td>书名</td>
					<td>作者</td>
					<td>价格</td>
					<td>删除</td>
					<td>修改</td>
				</tr>
				<tr v-for="(book,index) in bookObjs">
					<td>{{book.id}}</td>
					<td>{{book.name}}</td>
					<td>{{book.author}}</td>
					<td>{{book.price}}</td>
					<td><input type="button" value="删除" @click="deleteBook(index)"/></td>
					<td><input type="button" value="修改" @click="updateBook(index)"/></td>
				</tr>
			</table>
		</div>
	</body>
</html>
<script src="../02code/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let vm=new Vue({
		el:"#app",
		data:{
			isShowBox:false,
			upIndex:-1,
			id:"",
			name:"",
			author:"",
			price:"",
			
			upid:"",
			upname:"",
			upauthor:"",
			upprice:"",
		
			bookObjs: [
			    {
			        id: "001",
			        name: "三国演义",
			        author: "罗贯中",
			        price: 30
			    },
			    {
			        id: "002",
			        name: "西游记",
			        author: "吴承恩",
			        price: 35
			    },
			    {
			        id: "003",
			        name: "水浒传",
			        author: "施耐庵",
			        price: 45
			    }
			]
		},
		methods:{
			add(){
				this.bookObjs.push({
					id:this.id,
					name:this.name,
					author:this.author,
					price:this.price
				});
			},
			deleteBook(index){
				if(confirm("确定要删除信息?")){
					this.bookObjs.splice(index,1);
				}
			},
			updateBook(index){
				this.isShowBox=true;
				this.upIndex=index;
				// 数据变化
				this.upid=this.bookObjs[index].id;
				this.upname=this.bookObjs[index].name;
				this.upauthor=this.bookObjs[index].author;
				this.upprice=this.bookObjs[index].price;		
			},
			addBook(){
				this.isShowBox=false;
				this.bookObjs[this.upIndex].name=this.upid;
				this.bookObjs[this.upIndex].name=this.upname;
				this.bookObjs[this.upIndex].author=this.upauthor;
				this.bookObjs[this.upIndex].price=this.upprice;
			},
			cancel(){
				this.isShowBox=false;
			}
		}
	});
</script>

Ensoleile2021

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue实现购物车增删改

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .upBox{ width:300px; height:300px; position: absolute; left: 0;top: 0;bottom: 0;right: 0; m
复制链接

扫一扫