Utilisez vue2 pour implémenter les fonctions de panier d'achat et de sélection d'adresse

Cet article présente principalement l'utilisation de vue2 pour implémenter les fonctions de panier et de sélection d'adresse. Cet article vous le présente en détail à travers une combinaison d'exemples de codes. Les amis dans le besoin peuvent s'y référer

<.> Tout d'abord, la 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= -->

Utilisation de filtres

1.méthode de citation html

<p class="item-price">{{item.productPrice | money(&#39;元&#39;)}}</p>

2. Filtre

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"

calculé Le calcul en temps réel

est le suivant : trois données sont affichées par défaut, cliquez sur plus pour toutes les 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);
  }
},

Tout d'abord, proposons-en une ou deux exemples classiques

1. Ce qui suit implémente la sélection par clic des cartes circulaires

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

2. Ce qui suit implémente la sélection par clic des 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里需要定义-->

Hors sujet : Puisque je suis novice, apprendre un peu est une leçon, enregistrez en plus la méthode d'écriture du calque de masque de boîte contextuelle auxiliaire

<p class="md-overlay" v-if="delFlag"></p>

Syntaxe js de Vue2. est publié pour référence facile

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

2. >Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère qu'il sera utile à l'avenir. Utile à tout le monde.

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

Articles connexes :

Angular 5.x Study Notes Application de routeur (routage)

Actifs du fichier de ressources vue2.0 et statique détaillé explication de la différence

Répertoire de la structure du projet Vuex et une introduction simple à la configuration

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!