<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>名称</th>
<th>日期</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- tr是表单每行,td为每行的列元素 -->
<tr v-for='(item,index) in list'>
<td>{{item.book}}</td>
<td>{{item.date}}</td>
<td>{{item.price}}</td>
<td>
<button @click='item.num--' v-bind:disabled='item.num==1'>-</button>
{{item.num}}
<button @click='item.num++'>+</button>
</td>
<td>
<button @click='remove(index)'>移除</button>
</td>
</tr>
</tbody>
</table>
<div>
总价格:{{total}}
</div>
<!-- <ul>
<li v-for='(item,index) in list'>
{{index+1}}{{item.book}}-{{item.date}}-{{item.price}}
<button @click='item.num--'>-</button>{{item.num}}
<button @click='item.num++'>+</button>
</li>
</ul> -->
</div>
<script src="vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
list:[
{book:'算法',date:'2006',price:'85',num:'1'},
{book:'编程',date:'2003',price:'35',num:'1'}
]
},
computed:{
total(){
let total=0;
for(let i=0;i<this.list.length;i++){
total+=this.list[i].price*this.list[i].num;
}
return total;
}
},
methods:{
remove(index){
this.list.splice(index,1)
}
}
})
//axios.get('https://autumnfish.cn/api/joke/list?num=3')
</script>
</body>
</html>