VUE2.0实现购物车和地址选配功能学习第四节

Posted 2020-09-01 AfterA11

第四节 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等属性和包含的方法值等*/
          });
      }
    }

});