Use vue2 to implement shopping cart and address selection functions

亚连
Release: 2018-05-28 14:17:12
Original
1406 people have browsed it

This article mainly introduces the use of vue2 to implement shopping cart and address selection functions. This article introduces it to you in great detail through a combination of example codes. Friends in need can refer to it

First of all, vue basic js writing method

new Vue({ el:"#app", //模型 data:{ }, filters:{ }, mounted:function(){ this.$nextTick(function(){ //初始化调用 }); }, computed:{ //实时计算 }, methods:{ } });
Copy after login

v-for

  • {{item.productName}}

  • Copy after login

    v-model

    (Real-time update)

     

    {{item.productQuantity}}

    Copy after login

    v-bind

    Usage of filters

    1.html reference method

    {{item.productPrice | money('元')}}

    Copy after login

    2. Filter

    filters:{ formatMoney:function(value,type){ return "¥"+value.toFixed(2)+ type; } },
    Copy after login

    3.Global filter (written in new Outside Vue)

    Vue.filter("money",function(value,type){ return "¥"+value.toFixed(2) + type; //保留两位小数 结果eg:¥19.00元 });
    Copy after login

    Call the method in methods:

    @click="method(param)" //或者 @click="delFlag=false" @click="limitNum=addressList.length"
    Copy after login

    computed real-time calculation

    is as follows: Three pieces of data are displayed by default, click more to display all

  • more

    data:{ limitNum:3 }, computed:{ filterAddress:function(){ return this.addressList.slice(0,this.limitNum); } },
  • Copy after login

    First put forward one or two classic examples

    1. The following implements the click selection of the loop card

  • Copy after login

    2. The following implements the click selection of the fixed card

    • 标准配送

      Free

    • 高级配送

      180

    Copy after login

    Digression: Since I am a novice, I will learn a little bit, and I will also record the writing method of the auxiliary pop-up box mask layer

    Copy after login

    vue2’s js syntax is posted for easy reference

    1. Call the backend method

    var _this = this; this.$http.get("data/address.json").then(function(response){ _this.addressList = response; //这里不能直接用this 此this非彼this 所以只能声明_this }); //以下为ES6写法,就可以直接用this了 let _this = this; //没用,就放这看看~ this.$http.get("data/cartData.json",{"id":123}).then(res=>{ this.productList = res.data.result.list; });
    Copy after login

    2.forEach Loop

    this.productList.forEach(function(item,index){ if(typeof item.checked == 'undefined'){ //如果item中没有checked属性 在item对象中添加checked属性,值为true _this.$set(item,"checked",true);//局部注册 Vue.set(item,"checked",true);//全局注册 } });
    Copy after login

    The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

    Related articles:

    Angular 5.x Study Notes Router (routing) application

    ##vue2.0 resource file assets and static Detailed explanation of the difference

    vuex project structure directory and some simple configuration introduction

    The above is the detailed content of Use vue2 to implement shopping cart and address selection functions. For more information, please follow other related articles on the PHP Chinese website!

    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!