vue 第八天 小结 作业模拟购物车
<div id="vue_one">
<table>
<tr>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in book">
<th>{
{
item.name}}</th>
<th>{
{
item.time}}</th>
<th>￥{
{
item.price}}</th>
<th>
<button @click="item.counts >1 ? item.counts-- : item.counts">-</button>
{
{
item.counts}}
<button @click="item.counts++">+</button>
</th>
<th>
<button @click="delete1(index)">移除</button>
</th>
</tr>
</table>
总价格：{
{
sum1}}
<font v-for="item in qwe">{
{
item}}</font>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
counts: 0,
book: [
{
name: "java从入门到入土",
time: "2016-4",
price: 15.00,
counts: 1
},
{
name: "php找不到理由学习",
time: "2012-4",
price: 53.00,
counts: 1
},
{
name: "编程是什么",
time: "2008-10",
price: 54.00,
counts: 1
},
{
name: "编程大全",
time: "2014-3",
price: 322.00,
counts: 1
}
]
},
methods: {
delete1(index) {
this.book.splice(index, 1);
}
},
computed: {
sum1() {
let cc = 0;
for (let b in this.book) {
cc += this.book[b].counts * this.book[b].price
}
return cc;
}
}
})
</script>