Maison > interface Web > js tutoriel > Comment utiliser vue2 pour implémenter le panier d'achat et la sélection d'adresse

Comment utiliser vue2 pour implémenter le panier d'achat et la sélection d'adresse

php中世界最好的语言
Libérer: 2018-05-26 10:54:44
original
1527 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser vue2 pour réaliser la sélection du panier et de l'adresse. Quelles sont les précautions pour utiliser vue2 pour réaliser la sélection du panier et de l'adresse. Voici un cas pratique. un regard.

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

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

v-for

<li v-for="(item,index) in productList">
  <p class="item-name">{{item.productName}}</p>
</li>
Copier après la connexion

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>
Copier après la connexion

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= -->
Copier après la connexion

filtresUtilisation des filtres

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

<p class="item-price">{{item.productPrice | money('元')}}</p>
Copier après la connexion

2 .Filter

filters:{
  formatMoney:function(value,type){
    return "¥"+value.toFixed(2)+ type;
  }
},
Copier après la connexion

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

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

Appelez la méthode dans les méthodes :

@click="method(param)"
//或者
@click="delFlag=false"
@click="limitNum=addressList.length"
Copier après la connexion

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);
  }
},
Copier après la connexion

Proposez d'abord un ou deux exemples classiques

1 Ce qui suit implémente la sélection par clic des cartes de boucle

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

Ce qui suit implémente la sélection par clic de. cartes fixes

<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里需要定义-->
Copier après la connexion

Hors sujet : Puisque 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

<p class="md-overlay" v-if="delFlag"></p>
Copier après la connexion

La syntaxe js de Vue2 publie quelques vérifications pratiques

1 Appelez 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;
});
Copier après la connexion

. 2. Boucle forEach

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);//全局注册
  }
});
Copier après la connexion

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 site php chinois !

Lecture recommandée :

Comment utiliser Angular pour effectuer le rendu côté serveur

Comment utiliser vue pour tout implémenter sélection et sélection inverse

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal