微信小程式與vue的一些區別

前言

更多內容，請訪問我的 個人部落格。

---

1、條件渲染

• vue使用 v-if v-else-if v-else 指令，如下：

  <div v-if="color=='red'">red<div>
  <div v-else-if="color=='orange'">orange<div>
  <div v-else>yellow<div>
  複製程式碼

• wx使用 wx:if wx:elif wx:else 指令，如下：

  <view wx:if="{{color=='red'}}">red<view>
  <view wx:elif="{{color=='orange'}}">orange<view>
  <view wx:else>yellow<view>
  複製程式碼

2、顯示隱藏元素

• vue使用 v-show 指令，如下：

  <div v-show="color=='red'">red<div>
  複製程式碼

• wx使用 hidden 指令，如下：

  <view hidden="{{color=='red'}}">red<view>
  複製程式碼

3、繫結class

• vue使用 v-bind: 或簡寫為 ： 指令，如下：

  <div :class="{ 'class-a': isA }">red<div>
  複製程式碼

  Javascript程式碼：

  data: {
      isA: false  //當isA改變時，將更新class
  }
  複製程式碼

• wx，如下：

  <view class="{{ isA ? 'class-a':'' }}">red<view>
  複製程式碼

  Javascript程式碼：

  data: {
      isA: false  //當isA改變時，將更新class
  }
  複製程式碼

4、事件處理

• vue使用 v-on: 或 @ 指令繫結事件，如下：

  <div v-on:click="counter += 1">Add 1<div>
  複製程式碼

• wx使用 baintap 指令，如下：

  <view bindtap="clickMe">click<view>
  複製程式碼

5、繫結值

• vue動態繫結一個變數的值為元素的某個屬性的時候，會在變數前面加上冒號 ： ，如下：

  <img :src="imgSrc"/>
  複製程式碼

• wx繫結某個變數的值為元素屬性時，會用兩個大括號括起來，如下：

  <img src="imgSrc"/>
  複製程式碼

6、繫結事件傳參

• vue繫結事件的函式傳引數時，可以把引數寫在函式後面的括號裡，如下：

  <div @click="changeTab(1)">嚯嚯</div>
  複製程式碼

• wx繫結事件的函式傳引數時，可以繫結到元素中，在函式中獲取，如下：

  <view bindtap="changeTab()" data-tab="1">嚯嚯</view>
  複製程式碼

  Javascript程式碼：

  changeTab(e) {
      var tab = e.currentTarget.dataset.tab
  }
  
  複製程式碼

7、設定值

• vue設定test的值可以用，this.test = true ；獲取test的值可以用 this.test 。
• wx設定test的值要用 this.setData({test:true}) ；獲取test的值用 this.data.test 。

---