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

潘高發表於2019-03-06
微信小程式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 。

相關文章