vue2 realisiert die automatische Verknüpfung von Warenkorb und Adresse

Dieses Mal bringe ich Ihnen vue2, um den Warenkorb und die Adresse automatisch zu binden. Was sind die Vorsichtsmaßnahmen für vue2, um den Warenkorb und die Adresse automatisch zu binden? Schauen Sie mal rein.

Zuallererst Vue Basic Js-Schreibmethode

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

(Echtzeit-Update)

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

FilterVerwendung des Filters

1.html-Referenzmethode

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

2

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

3. Globaler Filter (außerhalb von New Vue geschrieben)

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

Methode in Methoden aufrufen:

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

Berechnete Echtzeitberechnung

lautet wie folgt: Standardmäßig werden drei Daten angezeigt. Klicken Sie auf „Mehr“, um alle anzuzeigen

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

Stellen Sie zunächst ein oder zwei Klassiker vor. Beispiel

1. Im Folgenden wird die Klickauswahl der Schleifenkarte implementiert.

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

2 🎜>

Off-Topic: Da ich ein Anfänger bin, werde ich ein wenig lernen und die Schreibmethode der Hilfs-Popup-Box-Maskenebene aufzeichnen

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

Die js-Syntax von Vue2 wird zum einfachen Nachschlagen veröffentlicht

1. Backend-Methode aufrufen

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 .

forEachloop

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema php Chinesische Website!

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

Empfohlene Lektüre:

vue.js+element-ui Tree Control modifizierte iview-Schritte, detaillierte Erklärung

Angular-Implementierung im Detail Erläuterung der serverseitigen Rendering-Fälle

Das obige ist der detaillierte Inhalt vonvue2 realisiert die automatische Verknüpfung von Warenkorb und Adresse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!