vue 实现图书购物车小案例

最新推荐文章于 2024-05-16 22:04:43 发布

zsl888822

最新推荐文章于 2024-05-16 22:04:43 发布

阅读量1.7k

点赞数 2

分类专栏： VUE 文章标签： vue 实现图书购物车

本文链接：https://blog.csdn.net/zsl15039718107/article/details/103409712

版权

VUE 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
 <head>
     <meta charset="UTF-8">
	 <title>tushu</title>
     <style>
	  .active{
		  color: red;
	  }
	  table{
		border: 1px solid #e9e9e9;
		border-collapse: collapse;
		border-spacing: 0;
	  }
	  th,td{
		padding: 8px 16px;
		border: 1px solid #e9e9e9;
		text-align: center;
	  }
	  th{
		background-color: #f7f7f7;
		color: #5c6b77;
		font-weight: 600;
	  }
     </style>
 </head>
 <body>
	 <div id="app">
		 <div v-if="books.length">
		 	 <table>
			 <thead>
				 <tr>
				     <th></th>
				     <th>书籍名称</th>
				     <th>出版日期</th>
				     <th>价格</th>
				     <th>购买数量</th>
				     <th>操作</th>
				 </tr>
			 </thead>
			 <tbody>
			     <tr v-for="(item,index) in books">
					 <td>{{item.id}}</td>
					 <td>{{item.name}}</td>
					 <td>{{item.date}}</td>
					 <td>{{item.price | shownd}}</td>
					 <td>
						 <button :disabled="item.count <= 1" @click="decream(index)">-</button>
						 {{item.count}}
						 <button @click="incream(index)">+</button>
					 </td>
				     <td><button @click="redis(index)">移除</button></td>
				 </tr>
			 </tbody>
		 </table>
			 <h2>总价格：{{zprice | shownd}}</h2>
		 </div>
		 <h1 v-else>购物车为空</h1>
	 </div> 
 
 <script src="../vue.js"></script>
 <script src="./main.js"></script>
 </body>
</html>

main.js代码：

const app = new Vue({
	el:'#app',
	data:{
		books:[
		    {
				id: 1,
				name: '《算法导论》',
				date: '2006-6',
				price: 85.00,
				count: 1
			},
			{
				id: 2,
				name: '《编程艺术》',
				date: '2006-5',
				price: 59.00,
				count: 1
			},
			{
				id: 3,
				name: '《编程珠玑》',
				date: '2008-10',
				price: 39.00,
				count: 1
			},
			{
				id: 4,
				name: '《代码大全》',
				date: '2006-3',
				price: 128.00,
				count: 1
			}
		]
	},
	methods:{
		incream(index){
            this.books[index].count++
		},
		decream(index){
			this.books[index].count--
		},
		redis(index){
			this.books.splice(index,1)
		}
	},
	computed:{
		zprice(){
			let st = 0
			for(let i=0; i<this.books.length;i++){
				st += this.books[i].price * this.books[i].count
			}
			return st
		}
	},
	filters:{
        shownd(price){
			return '￥' + price.toFixed(2)
		}
	}
})

在这里插入图片描述

zsl888822

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
vue 实现图书购物车小案例

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>tushu</title> <style> .active{ color: red; } table{ border: 1px solid ...
复制链接

扫一扫

专栏目录