zoukankan      html  css  js  c++  java
  • VUE2.0实现购物车和地址选配功能学习第四节

    第四节 v-on实现金额动态计算

    用¥金额 进行格式处理,可以使用原生js进行转换,但是在vuei,使用filter过滤器更加方便

    注:

    1.es6语法=>和import等

    好处在于res参数后的function函数内的this作用域,不弄在外部声明变量了。

    methods:{

    cartView:function(){

    let _this=this;

    this.$http.get("data/cartData.json",{"id":123}).then( res=>{

    this.productList =res.body.result.productList;
    this.totalMoney=res.body.result.totalMoney;

    }); }}

    2.全局过滤器:可以在任何页面使用

    html:{{item.productPrice*item.productQuentity | money('元')}}
    js:
           Vue.filter("money",function (value,type) {
    return"¥"+value.toFixed(2)+type;
    })

    代码:

    <ul class="cart-item-list">
        <li v-for="(item,index) in productList">
            <!--v-for="item in productList"这是vue1.0的用法-->
            <div class="cart-tab-1">
                <!-- 单选 -->
                <div class="cart-item-check">
                    <a href="javascipt:;" class="item-check-btn">
                        <svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
                    </a>
                </div>
                <!-- 商品图片 -->
                <div class="cart-item-pic">
                    <img v-bind:src="item.productImage" alt="烟">
                    <!--src="{{item.productImage}}"貌似不能使用-->
                    <!--v-bind是比较好的办法,浏览器解析字符串直接写src会报错什么的-->
                </div>
                <!-- 商品名称 -->
                <div class="cart-item-title">
                    <div class="item-name">{{item.productName+":"+index}}</div>
                    <!--{{item.productName+":"+index}}-->
                </div>
                <!-- 赠品 -->
                <div class="item-include">
                    <dl>
                        <dt>赠送:</dt>
                        <dd v-for="part in item.parts" v-text="part.partsName"></dd>
                    </dl>
                </div>
            </div>
            <!-- 单价 -->
            <div class="cart-tab-2">
                <div class="item-price">{{item.productPrice | formatMoney}}</div>
            </div>
            <div class="cart-tab-3">
                <div class="item-quantity">
                    <div class="select-self select-self-open">
                        <div class="quentity">
                            <a href="javascript:;">-</a>
                            <input type="text" v-model="item.productQuentity">
                            <!--双向数据绑定功能,实现总金额实时变化功能-->
                            <a href="javascript:;">+</a>
                        </div>
                    </div>
                    <div class="item-stock">有货</div>
                </div>
            </div>
            <div class="cart-tab-4">
                <!-- 总金额 -->
                <div class="item-price-total">{{item.productPrice*item.productQuentity | formatMoney}}</div>
            </div>
            <!-- 删除功能 -->
    
            <div class="cart-tab-5">
                <div class="cart-item-opration">
                    <a href="javascript:;" class="item-edit-btn">
                        <svg class="icon icon-del"><use xlink:href="#icon-del"></use></svg>
                    </a>
                </div>
            </div>
    
        </li>
    </ul>js:
    /**
     * Created by zs1414030853 on 2017/2/24.
     */
    /*完整vue实例*/
    var vm=new Vue({
        el:"#app",
        data:{
                  totalMoney:0,
                  productList:[]
            /*初始值*/
        },
    
        filters:{
             formatMoney:function (value) {
                 return"¥"+value.toFixed(2);
         }
         /*局部过滤器只能在实例的范围内使用*/
        },
    
           mounted:function () {
            this.$nextTick(function () {
    
            });/*此时this和vm是等同的,这是mounted和ready的vue1和2的区别*/
             this.cartView();
    
        },
    
        methods:{
          cartView: function () {
                 var _this =this;
                 /* this.$http.jsonp*/
                  this.$http.get("data/cart.json",{"id":123}).then(function (res) {
                 _this.productList =res.body.result.productList;
                 _this.totalMoney=res.body.result.totalMoney;
                 /*在运行的时候打断点可以查看res等属性和包含的方法值等*/
              });
          }
        }
    
    });
    
    
  • 相关阅读:
    「学习记录」《数值分析》第三章计算实习题(Python语言)
    Set原理
    字符串流stringReader
    Collection List接口
    io
    Dubbo 服务容错Hystrix
    Duboo 与springboot整合
    读取配置文件
    springboot 端口号
    springboot 多环境选择
  • 原文地址:https://www.cnblogs.com/zhus/p/6444045.html
Copyright © 2011-2022 走看看