html代码块
<div id="app">
<div class="text1">
<span>id</span>
<span>书籍名称</span>
<span>出版日期</span>
<span>购买价格($)</span>
<span>数量</span>
<span>操作</span>
</div>
<div class="list" v-for="(item,index) in users" :key="item.id">
<span>{{item.id}}</span>
<span>{{item.book}}</span>
<span>{{item.day}}</span>
<span>{{item.money}}</span>
<span><button type="button" @click="jian(item)" >-</button>
<b>{{item.num}}</b>
<button type="button" @click="add(item)" >+</button></span>
<span><button type="button" @click="delItem(item)">移除</button></span>
</div>
<p>总价:<b>{{sum}}</b></p>
</div>
css代码块(自己根据内容修改)
#app{
width: 800px;
height: 400px;
margin: 0 auto;
text-align: center;
border: 1px solid #CCCCCC;
}
.text1{
margin-top: 50px;
}
span{
display: inline-block;
width: 100px;
text-align: center;
margin-top: 5px;
}
input{
width: 30px;
}
b{
display: inline-block;
width: 20px;
}
js代码块(运用vue遍历更快)
<script type="text/javascript">
new Vue({
el:"#app",
data:{
users:[
{
"id":1,
"book":"小绿书",
"day":"2002-9",
"money":100,
"num":1,
},
{
"id":2,
"book":"小红书",
"day":"2016-9",
"money":16700,
"num":1,
},
{
"id":3,
"book":"发生的书",
"day":"2026-9",
"money":600,
"num":1,
},
{
"id":4,
"book":"奥古斯丁",
"day":"2004-9",
"money":3455,
"num":1,
},
{
"id":5,
"book":"发手动阀",
"day":"2046-9",
"money":7983,
"num":1,
},
],
},
methods:{
add(item){
item.num+=2
},
jian(item){
if(item.num>1){
item.num--
}
},
delItem(item){
var ind = this.users.findIndex(value=>value===item);
this.users.splice(ind,1);
}
},
computed:{
sum(){
var totalPrice = 0; //临时单价
this.users.forEach(function(val){
totalPrice+=val.money*val.num;
});
return totalPrice;
}
}
})
</script>