VUE学习小练习

最新推荐文章于 2024-07-22 10:10:18 发布

Ranx3

最新推荐文章于 2024-07-22 10:10:18 发布

阅读量287

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41472891/article/details/108595914

版权

前端专栏收录该内容

37 篇文章 3 订阅

订阅专栏

实现效果图
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet"  href="style.css" />
    <!--<script src="js/vue.js"></script>
    	<script src="js/vue-router.js"></script>-->
    	<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>

<!--vue对象创建后，删除v-cloak属性-->
<div id='app'>
	<div v-if="books.length==0">
		购物车为空
		
	</div>
	<div v-else>
		<table>
		
		<thead>
			<tr>
				<th></th>
			<th>书籍</th>
			<th>出版日期</th>
			<th>价格</th>
			<th>购买数量</th>
			<th>操作</th>
				
			</tr>
			
		</thead>
		
		<tbody>
			<tr v-for='(value,index) in books'>
				<td >{{value.id}}</td>
				<td >{{value.name}}</td>
				<td >{{value.date}}</td>
				<!--<td >{{value.price.toFixed(2)}}</td>-->
				<td >{{value.price | showPrice}}</td>	<!--使用过滤器改变金额格式-->
				<td >
					<button @click="decrement(index)" v-bind:disabled="value.count <=1">-</button> <!--按钮失效-->
					{{value.count}}
					<button @click="increment(index)">+</button>
				</td>
				<td >
					<button @click='remove(index)'>移除</button>
				</td>
			</tr>
			
		</tbody>
		
	</table>
		<h2 >总价格为{{totalPrice | showPrice}}</h2>
	</div>
	

	
</div>

		<script src="main.js"></script>
</body>
</html>

table{
	border:1px solid #e9e9e9;
	border-collapse: collapse;
	border-spacing: 0;
}
th,td{
	padding:8px 16px;
	border:1px solid #E9E9E9;
	text-align: left;
}
th{
	background-color: #f7f7f7;
	color:#5c6b77;
	font-weight: 600;
}


const app = new Vue({
	el:'#app',
	data:{
		books:[
			{
				id:1,
				name:'小黄书',
				date:'2020-09',
				price:80.00,
				count:2
			},
			{
				id:2,
				name:'博人传',
				date:'2020-09',
				price:51.00,
				count:2
			},
			{
				id:3,
				name:'王书',
				date:'2020-09',
				price:80.00,
				count:2
			},
			{
				id:4,
				name:'牛逼书',
				date:'2020-09',
				price:80.00,
				count:2
			}
		]
	},
	computed:{
		totalPrice(){
			let total = 0;
			for(let i = 0; i < this.books.length; i++){
				total += this.books[i].price * this.books[i].count;
			}
			return total;
		}
		
	},
	methods:{
		increment(index){
			console.log('hello'+index);
			this.books[index].count++;
		},
		decrement(index){
			if(this.books[index].count>=2){
				console.log('world'+index);
			this.books[index].count--;
			}
		},
		remove(index){
			this.books.splice(index,1);/*移除*/
		}
	},
	filters:{
		showPrice(price){
			return '￥'+price.toFixed(2);/*保留两位小数*/
		}
		
	}
})