使用Vue和bootstrap实现简单购物车功能

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>

效果如下：