vue案例 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>	
		<div id="app">
			<div v-if="books.length">
				<table border="" cellspacing="" cellpadding="">
					<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.data}}</td>
							<td>{{item.price | showPrice}}</td> <!--过滤器 -->
							<td>
								<button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
								{{item.count}}
								<button @click="increment(index)">+</button>
							</td>
							<td>
								<button @click="remove(index)">删除</button>
							</td>
						</tr>
					</tbody>
				</table>
				<h2>
					总价格:{{totolPrice | showPrice}}
				</h2>	
			</div>
			<h2 v-else>购物车为空</h2>
		</div>
	</body>
	<script type="text/javascript" src="../vue.js"></script>
	<script src="index.js"></script>
</html>

　　

table{
	border: 1px solid #ccc;
	border-collapse: collapse;
	border-spacing: 0;
}
th,td{
	padding: 8px 16px;
	border: 1px solid #ccc;
	text-align: left;
}
th{
	background-color: #e7e7e7;
	color: darkgray;
	font-weight: 600;
}

　　

const app = new Vue({
	el:'#app',
	data:{
		books:[
				{id:100,name:'计算机组成原理',data:2002,price:100,count:1},
				{id:101,name:'现代操作系统',data:2002,price:100,count:1},
				{id:102,name:'Unix编程艺术',data:2002,price:100,count:1},
				{id:103,name:'代码大全',data:2002,price:100,count:1},
			],
	},
	methods:{
		increment(index){
			this.books[index].count++;
		},
		decrement(index){
			this.books[index].count--;
		},
		remove(index){
			this.books.splice(index,1)
		}
	},
	//计算属性
	computed:{
		totolPrice(){
			//第一种写法
			let totolPrice = 0;
			for(let i=0;i<this.books.length;i++){
				totolPrice += this.books[i].count * this.books[i].price;
			}
			return totolPrice;
			
			//第二种写法
			// let totolPrice = 0;
			// for(let i in this.books){
			// 	totolPrice += this.books[i].count * this.books[i].price;
			// }
			// return totolPrice;
			
			//第三种写法
			// let totolPrice = 0;
			// for(item of this.books){
			// 	totolPrice += item.count * item.price;
			// }
			// return totolPrice;
		}
	},
	//过滤器
	filters:{
		showPrice(price){
			return '￥' + price.toFixed(2);
		}
	}
})

　　

posted @ 2020-07-12 14:28  诸城布拉德皮特  阅读(142)  评论(0)    收藏  举报