微信小程序与vue的一些区别

本文最后更新于:2021年7月29日 下午

1、条件渲染

  • vue使用 v-if v-else-if v-else 指令,如下:
    1
    2
    3
    <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 指令,如下:
    1
    2
    3
    <view wx:if="{{color=='red'}}">red<view>
    <view wx:elif="{{color=='orange'}}">orange<view>
    <view wx:else>yellow<view>

2、显示隐藏元素

  • vue使用 v-show 指令,如下:
    1
    <div v-show="color=='red'">red<div>
  • wx使用 hidden 指令,如下:
    1
    <view hidden="{{color=='red'}}">red<view>

3、绑定class

  • vue使用 v-bind: 或简写为 指令,如下:
    1
    <div :class="{ 'class-a': isA }">red<div>
    Javascript代码:
    1
    2
    3
    data: {
    isA: false //当isA改变时,将更新class
    }
  • wx,如下:
    1
    <view class="{{ isA ? 'class-a':'' }}">red<view>
    Javascript代码:
    1
    2
    3
    data: {
    isA: false //当isA改变时,将更新class
    }

4、事件处理

  • vue使用 v-on:@ 指令绑定事件,如下:
    1
    <div v-on:click="counter += 1">Add 1<div>
  • wx使用 baintap 指令,如下:
    1
    <view bindtap="clickMe">click<view>

5、绑定值

  • vue动态绑定一个变量的值为元素的某个属性的时候,会在变量前面加上冒号 ,如下:
    1
    <img :src="imgSrc"/>
  • wx绑定某个变量的值为元素属性时,会用两个大括号括起来,如下:
    1
    <img src="imgSrc"/>

6、绑定事件传参

  • vue绑定事件的函数传参数时,可以把参数写在函数后面的括号里,如下:
    1
    <div @click="changeTab(1)">嚯嚯</div>
  • wx绑定事件的函数传参数时,可以绑定到元素中,在函数中获取,如下:
    1
    <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


如果这篇文章对你有帮助,或者想给我微小的工作一点点资瓷,请随意打赏。
潘高 微信支付

微信支付

潘高 支付宝

支付宝


微信小程序与vue的一些区别
https://blog.pangao.vip/微信小程序与vue的一些区别/
作者
潘高
发布于
2018年10月24日 晚上
更新于
2021年7月29日 下午
许可协议