1.新建项目
创建vue
vue create 项目名
引入bootstrap3
npm i bootstrap@3
2.app.vue
<template>
<h1 class="container bg-danger">购物车</h1>
<div class="container">
<table class="table table-responsive table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>price</th>
<th>count</th>
<th>delete</th>
</tr>
</thead>
<tbody>
<tr v-for="(book,index) in books" :key="book.id">
<td>{
{index+1}}</td>//即使删除其中一本书,id名也会正常排序
<td>《{
{book.name}}》</td>
<td>{
{book.price}}</td>
<!-- <td>{
{book.count}}</td>-->
<td>
<button @click="decrement(index)" :disabled="book.count<=1">-</button>
{
{book.count}}
<button @click="increment(index)">+</button>
</td>
<td>
<button class="btn-danger btn" @click="remove(index)">删除</button>
</td>
</tr>
</tbody>
</table>
<p>总价为:{
{totalPrice}}元</p>
<!-- <p>总价为:{
{books.reduce((pre,value)=>pre+value.count*value.price,0)}}</p>-->
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
data(){
return{
books:[
{
id:1,name:"遥远的救世主",price:27,count:1},
{
id:2,name:"平凡的世界",price:27,count:1},
{
id:3,name:"大江东去",price:27,count:1},
{
id:4,name:"人类简史",price:27,count:1}
]
}
},
methods:{
decrement(index) {
this.books[index].count--
},
increment(index){
this.books[index].count++
},
remove(index){
this.books.splice(index,1)
}
},
computed:{
totalPrice() {
return this.books.reduce((pre,value)=>pre+value.count*value.price,0)
}
}
}
</script>
<style>
//引入我们下载好的bootstrap
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
</style>
效果如下: