Vue+Bootstrap实现购物车程序（1）

最新推荐文章于 2024-05-11 09:44:49 发布

weixin_30546189

最新推荐文章于 2024-05-11 09:44:49 发布

阅读量348

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jianxian/p/10630451.html

版权

先看下案例效果：（简单的数量控制及价格运算）

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>购物车</title>
    <!--rel 属性指示被链接的文档是一个样式表,说白了就是指明你链进来的对象是个什么-->
    <link href="bootstrap.min.css" type="text/css" rel="stylesheet">
</head>
<body>
  <!--
    container布局容器
    Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
    1、container 类用于固定宽度并支持响应式布局的容器。2、.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
    -->
    <div id="app" class="container">
        <h1>购物车</h1>
        <hr>
        <btn-grp></btn-grp>
        <br>
        <br>
        <table class="table table-bordered table-striped table-hover">
            <tr>
              <th>ID</th>
              <th>商品名称</th>
              <th>商品价格</th>
              <th>商品数量</th>
              <th>商品总价</th>
            </tr>
            <tr v-for="(product,index) in products">
              <td>{{index+1}}</td>
              <td>{{product.name}}</td>
              <td>{{product.price}}</td>
              <td>
                 <!--可以将两个按钮的方法合成一个，通过传参-->
                <!--<button @click="changeCount(prod, -1)">-</button>-->
                <button @click="cutCount(product)" class="btn btn-default btn-sm">-</button>
                <input type="number" v-model="product.count"/>
                <!--<button @click="changeCount(prod, 1)">-</button>-->
                <button @click="addCount(product)" class="btn btn-default btn-sm">+</button>
              </td>
              <td>{{product.price * product.count}}</td>
            </tr>
            <tr>
              <!--text-right排版文本右对齐-->
              <td colspan="4" class="text-right">总价:</td>
              <!--text-primary辅助类文本-->
              <td class="text-primary">{{totalMoney}}</td>
              <!--方法调用：<td class="text-primary">{{getTotalMoney()}}</td>-->
            </tr>
        </table>
    </div>
    <script type="application/javascript" src="vue-2.6.9.min.js"></script>
    <script type="application/javascript">
        Vue.component('btn-grp',{
          props:['button'],
          //btn-group：基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
          //  role="group"按钮组合
          template:`
                  <div class="btn-group" role="group">
                    <button type="button"
                        v-for="button in buttons"
                        v-bind:class="\'btn \'+button.class"
                        v-on:click="button.handler"
                    >{{button.title}}</button>
                  </div>
          `,
          data:function(){
            return{
              buttons:[
                {title:'添加',class:'btn-primary',handler:function(){alert('点击添加按钮')}},
                {title:'修改',class:'btn-default',handler:function(){alert('点击修改按钮')}},
                {title:'删除',class:'btn-default',handler:function(){alert('点击删除按钮')}}
              ]
            }
          }
        })
        var app = new Vue({
          el:'#app',
          data:{
            products: [
              {
                name: '小米6S',
                price: 3999,
                count: 1,
              },
              {
                name: '锤子2',
                price: 4999,
                count: 1,
              },
              {
                name: '华为P20',
                price: 3599,
                count: 1,
              },
              {
                name: 'OPPO R15',
                price: 2999,
                count: 1,
              },
              {
                name: 'OPPO R11',
                price: 1999,
                count: 1,
              },
            ],
          },
          methods:{
            // 用户点击加减数量时调用
            cutCount:function(product){
                if(product.count>0){
                  product.count--
                }
            },
            addCount:function(product){
                product.count++
            }
            /*
             用户点击加减数量时调用通过传参合并为一个函数
             changeCount: function(prod, num) {
               if(num < 0) {
                 if(prod.count > 0) {
                  prod.count += num;
                 }
               }
               else {
                prod.count += num;
               }
             },
            */
            /*获取总价除了计算属性也可以用方法
             getTotalMoney: function() {
              var totalMoney = 0.0;
               for(var i = 0; i < this.products.length; ++i) {
                totalMoney += parseFloat(this.products[i].price * this.products[i].count);
               }
               return totalMoney;
             }
            */
          },
          computed:{
            totalMoney:function(){
              var price = 0;
              for(var i = 0; i < this.products.length; ++i) {
                price += parseFloat(this.products[i].price * this.products[i].count);
              }
              return price;
            }
          }
        })
    </script>
</body>
</html>