Home > Web Front-end > JS Tutorial > body text

How to operate vue2 to implement shopping cart and address selection

php中世界最好的语言
Release: 2018-05-26 10:54:44
Original
1495 people have browsed it

This time I will show you how to operate vue2 to implement shopping cart and address selection. What are the precautions for operating vue2 to implement shopping cart and address selection. The following is a practical case. Let’s 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

<li v-for="(item,index) in productList">
  <p class="item-name">{{item.productName}}</p>
</li>
Copy after login

v-model

(real-time update)

<input type="text" value="0" disabled v-model="item.productQuantity">
<p class="item-price-total">{{item.productQuantity}}</p>
Copy after login

v-bind

<a href="javascript:;" class="item-check-btn" v-bind:class="{&#39;check&#39;:item.checked}">
<!--可通过更改item.checked的值设置是否选中-->
<!--必须用v-bind 不可直接在class里面直接使用{{}}-->
<!--v-bind:class= 可简写为 :class= -->
Copy after login

filtersFilter Use of #1.html reference method

<p class="item-price">{{item.productPrice | money('元')}}</p>
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

<li v-for="(item,index) in filterAddress">
<p class="shipping-addr-more">
<a class="addr-more-btn up-down-btn" href="javascript:" @click="limitNum=addressList.length">
  more
  <i class="i-up-down">
   <i class="i-up-down-l"></i>
   <i class="i-up-down-r"></i>
  </i>
 </a>
</p>
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

<li v-for="(item,index) in filterAddress" v-bind:class="{&#39;check&#39;:index==currentIndex}" 
@click="currentIndex=index">
<!--其中currentIndex在js里需要定义-->
Copy after login
2. The following implements the click to select the fixed card

<ul>
  <li v-bind:class="{&#39;check&#39;:shippingMethod==1}" @click="shippingMethod=1">
   <p class="name">标准配送</p>
   <p class="price">Free</p>
  </li >
  <li v-bind:class="{&#39;check&#39;:shippingMethod==2}" @click="shippingMethod=2">
   <p class="name">高级配送</p>
   <p class="price">180</p>
  </li>
 </ul>
 <!--其中shippingMethod在js里需要定义-->
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

<p class="md-overlay" v-if="delFlag"></p>
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

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!

Recommended reading:

How to use Angular to render on the server side


How to use vue to implement all selection and inverse selection

The above is the detailed content of How to operate vue2 to implement shopping cart and address selection. 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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template