Maison  >  Article  >  interface Web  >  Explication détaillée des étapes de mise en œuvre du panier d'achat et de la sélection d'adresse dans vue2

Explication détaillée des étapes de mise en œuvre du panier d'achat et de la sélection d'adresse dans vue2

php中世界最好的语言
php中世界最好的语言original
2018-04-27 16:59:551836parcourir

Cette fois, je vais vous apporter une explication détaillée des étapes de mise en œuvre de la sélection du panier et de l'adresse dans vue2. Quelles sont les précautions pour la mise en œuvre des étapes de sélection du panier et de l'adresse dans vue2. un cas pratique. Jetons un coup d'oeil.

Tout d'abord, méthode d'écriture vue basic js

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

v-for

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

v-model

(mise à jour en temps réel)

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

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= -->

filtresUtilisation du filtre

Méthode de référence 1.html

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

2.

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

3. Filtre global (écrit en dehors du nouveau Vue)

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

Appelez la méthode dans les méthodes :

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

le calcul calculé en temps réel

est le suivant : trois données sont affichées par défaut, cliquez sur plus pour tout afficher

<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);
  }
},

Proposez d'abord un ou deux classiques Exemple

1 Ce qui suit implémente la sélection par clic de la carte en boucle

<li v-for="(item,index) in filterAddress" v-bind:class="{&#39;check&#39;:index==currentIndex}" 
@click="currentIndex=index">
<!--其中currentIndex在js里需要定义-->

Ce qui suit implémente la sélection par clic de la carte fixe

<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里需要定义-->

. 🎜>

<p class="md-overlay" v-if="delFlag"></p>
Hors sujet : Comme je suis novice, je vais apprendre un peu, et j'enregistrerai la méthode d'écriture du calque de masque de boîte pop-up auxiliaire

La syntaxe js de Vue2 est publiée pour une référence facile

1. Appeler la méthode backend
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;
});

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);//全局注册
  }
});

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le. php site chinois !

Lecture recommandée :
Explication détaillée des étapes d'implémentation d'Observer dans Vue


Résumé des méthodes pour les composants parents de Vue pour appeler les composants enfants


Explication détaillée des étapes d'utilisation des composants globaux et locaux de vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn