使用vue.js前面所学知识实现下面购物车功能
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="anli.css">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if = "book.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 book">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.data}}</td>
<td>{{item.price | show}}</td>
<td>
<button @click = "btn(index)" v-bind:disabled = "item.count <= 1">-</button>
{{item.count}}
<button @click = "btns(index)">+</button>
</td>
<td>
<button @click = "romove(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<h2>总价格 {{totalprice}}</h2>
</div>
<h2 v-else>购物车为空</h2>
</div>
<script src=../js/vue.js></script>
<script src="anli.js"></script>
<script>
</script>
</body>
</html>
CSS代码
table {
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th,td{
padding: 8px 16px;
border: solid 1px #e9e9e9;
text-align: left;
}
th {
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
JS代码
const app = new Vue({
el:'#app',
data:{
book:[
{
id :1,
name:'C语言',
data:'2006-4',
price:85.00,
count:1
},
{
id :2,
name:'C++语言',
data:'2002-4',
price:59.00,
count:1
},
{
id :3,
name:'JAVA',
data:'2005-4',
price:39.00,
count:1
},
{
id :4,
name:'PHP',
data:'2002-4',
price:128.00,
count:1
}
],
},
methods:{
btn(index){
this.book[index].count--
},
btns(index){
this.book[index].count++
},
romove(index){
this.book.splice(index,1)
}
},
computed:{
totalprice:function(){
//reduce高阶函数
return this.book.reduce(function(pre,books){
return pre + books.price*books.count
},0)
}
},
//过滤器
filters:{
show(price) {
return '¥' + price.toFixed(2)
}
},
})