本文最后更新于:星期日, 五月 31日 2020, 2:37 下午

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


本文标题:微信小程序与vue的一些区别
文章作者:潘高
发布时间:2018年10月24日 - 22:10:55
最后更新:2020年05月31日 - 14:37:59
原始链接:https://blog.pangao.vip/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%8Evue%E7%9A%84%E4%B8%80%E4%BA%9B%E5%8C%BA%E5%88%AB/
许可协议:署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

Vue中添加友盟代码统计 上一篇
微信小程序中setData的key是变量怎么办 下一篇
如果这篇文章对你有帮助,或者想给我微小的工作一点点资瓷,请随意打赏。
潘高 微信支付

微信支付

潘高 支付宝

支付宝

 目录