vue.JS makes shopping cart and address selection-JS Tutorial-php.cn

This time I will bring you vue.JS to make a shopping cart and address selection.What are the precautions for making a shopping cart and address selection with vue.JS? The following is a practical case. Get up and take a look.

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

Copy after login

filtersFilter Use of#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 outside new 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 The 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 is implemented Click to select the loop card

Copy after login

2. The following implements the click to select the fixed card

  标准配送
 Free
 
  高级配送
 180

Copy after login

Digression: Since I am a novice, I will learn a little bit, and I will record the auxiliary pop-up box. How to write the 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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese Other related articles online!