vue售卖图书页面案例

 代码：

<script>
export default{data(){return{books:[{name:'《算法导论》',pubdate:'2006-9',price:'85',count:1},{name:'《unix编程技术》',pubdate:'2006-2',price:'59',count:1},{name:'《编程珠玑》',pubdate:'2008-10',price:'39',count:1},{name:'《代码大全》',pubdate:'2006-3',price:'128',count:1}]}},methods:{addBook(index){this.books[index].count++},subBook(index){this.books[index].count--},removeBook(index){this.books.splice(index,1)}},computed:{totalPrice(){let sum = 0for(let book of this.books){sum+=book.price*book.count}return sum}}}  
</script><template><div><table border="1px" style="width:600px"><thead><th></th><th>书籍名称</th><th>出版日期</th><th>价格</th><th>数量</th><th>操作</th></thead><tbody><tr v-for="(item,index) in books" :key="index"><td>{{index+1}}</td> <td>{{item.name}}</td> <td>{{item.pubdate}}</td><td>￥{{item.price}}</td><td><button :disabled="item.count<=1" @click="subBook(index)">-</button>{{item.count}}<button @click="addBook(index)">+</button></td><td><button @click="removeBook(index)">移除</button></td></tr></tbody></table>总价：￥{{totalPrice}}</div>
</template><style scoped>
</style>