vue之表格制作
vue表格制作,代码如下:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://unpkg.com/vue/dist/vue.js"></script><
·
vue表格制作,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<table border="1">
<tr>
<th v-for="item in tableHeader">{{item}}</th>
</tr>
<tr v-for="(item,index) in dat">
<td >{{index}}</td>
<td >{{item.bookName}}</td>
<td >{{currency}}{{item.price}}</td>
<td >{{item.quantity}}</td>
<td>
<button v-on:click="reduce(index)">-</button><button v-on:click="add(index)">+</button><button v-on:click="clear(index)">清空</button>
</td>
</tr>
</table>
<p>总价:{{currency}}{{totalPrice()}}</p>
</div>
<script>
const va = new Vue({
el:'#app1',
data:{
tableHeader:["序号","书名","价格","数量","操作"],
dat:[
{bookName:"围城",price:"75",quantity:"0"},
{bookName:"骆驼祥子",price:"55",quantity:"0"},
{bookName:"百年孤独",price:"69",quantity:"0"},
{bookName:"梦里花落知多少",price:"39",quantity:"0"}
],
currency:"¥"
},
methods:{
reduce(index){
if(this.dat[index].quantity >= 1) return this.dat[index].quantity--
},
add(index){
return this.dat[index].quantity++
},
clear(index){
return this.dat[index].quantity = 0
},
totalPrice(){
let da = this.dat.map(function (item){
return item['price'] * item['quantity']
}).reduce(function (preVales,n){
return preVales + n
},0);
return da
}
}
})
</script>
</body>
</html>
效果:
更多推荐
所有评论(0)