console
<!DOCTYPE>
<html lang="ZH-cn">
<head>
<meta charset="utf-8" >
<title>标题</title>
<meta name="keywords" content="关键字" />
<meta name="description" content="内容描述" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-cloak>
<div v-if="list.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 list" :key="item.id">
<td>{{index + 1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.date }}</td>
<td>{{ item.price | showPrice }}</td>
<td>
<button @click="decrement(index)" :disabled="item.count===1">-</button>
{{ item.count }}
<button @click="increment(index)">+</button>
</td>
<td>
<button @click="handlerRemove(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<div>总价：{{ totalPrice | showPrice }}</div>
</div>
</div>
</body>
</html>
<script>
const app = new Vue({
el:'#app',
data:{
list:[
{id:1,name:'《算法导论》',date:'2006-9',price:85.00,count:0},
{id:2,name:'《UNIX编程艺术》',date:'2006-2',price:59,count:0},
{id:3,name:'编程珠玑',date:'2008-10',price:39.00,count:0},
{id:4,name:'代码大全',date:'2006-3',price:128.00,count:0}
]
},
methods:{
decrement(index){
this.list[index].count--
},
increment(index){
this.list[index].count++
},
handlerRemove(index){
this.list.splice(index,1)
}
},
filters:{
showPrice(value){
return '￥' + value.toFixed(2)
}
},
computed:{
totalPrice(){
let total = 0
for(let i = 0; i < this.list.length;i++){
let item = this.list[i]
total += item.price * item.count
}
return total
}
}
})
</script>
<style>
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;
}
</style>