您的位置:首页 > 编程学习 > > 正文

vue购物车简单项目(vue实现简单购物车案例)

更多 时间:2022-01-21 00:49:36 类别:编程学习 浏览量:1695

vue购物车简单项目

vue实现简单购物车案例

本文实例为大家分享了vue实现简单购物车的具体代码,供大家参考,具体内容如下

vue购物车简单项目(vue实现简单购物车案例)

代码:

  • <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    
    <body>
      <li id="app">
        <table>
          <thead>
            <tr>
              <th></th>
              <th>书籍名称</th>
              <th>出版日期</th>
              <th>价格</th>
              <th>购买数量</th>
              <th>操作</th>
    
            </tr>
          </thead>
          <tbody>
            <tr v-for='(item,index) in books' ::key="item">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.date}}</td>
              <td>{{item.price*item.count | getFinalPrice}}</td>
              <td>
                <button @click='reduce(index)' :disabled='item.count <= 1'>-</button>
                {{item.count}}
                <button @click='add(index)'>+</button>
    
              </td>
              <td>
                <button @click='removeBtn(index)'>移除</button>
              </td>
            </tr>
          </tbody>
        </table>
        <h2 v-if='books!=""'>总价格:{{theSumOf | getFinalPrice}}</h2>
        <h2 v-else>购物车为空</h2>
      </li>
    </body>
    <script src="../js/vue.min.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          books: [
            {
              id: 1,
              name: '计算机应用',
              date: '2006-9',
              price: 85.00,
              count: 1
    
            },
            {
              id: 2,
              name: 'java应用',
              date: '2006-9',
              price: 10.00,
              count: 1
    
            },
            {
              id: 3,
              name: '大数据',
              date: '2006-9',
              price: 85.00,
              count: 1
    
            },
            {
              id: 4,
              name: 'ui设计师',
              date: '2006-9',
              price: 85.00,
              count: 1
    
            },
          ],
          addAnd:0
    
        },
        methods: {
          add(index) {
            this.books[index].count++
    
          },
          reduce(index) {
         
            this.books[index].count--
        
          },
          removeBtn(index) {
            this.books.splice(index, 1)
    
          }
        },
        components: {
    
        },
        computed: {
    
      
          theSumOf: function () {
          //累加计算的第一种方法
            //let sum = 0
            //this.books.forEach(item => {
            // sum += parseInt(item.price)*parseInt(item.count)
            });
            //return sum
    
     //累加计算的第二种方式
     //let sum = 0
     //for(let i in this.books){
      //sum += this.books[i].price*this.books[i]*count
     }
     //return sum
    
     //累加计算的第三种方式
     //let sum = 0
     //for(let item of this.books){
     //sum += item.price*item.count
     //}
     //return sum
    
     //累加计算的第四种方法
     return this.books.reduce(function(preValue,book){
     return preValue + book.price*book.count
     },0)
          }
    
        },
        filters: {
          getFinalPrice(price) {
            return '¥' + price.toFixed(2)
          },
        }
      });
    </script>
    
    <html>
    
  • 关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:vue 购物车
    您可能感兴趣