微信小程序与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 。