前言
更多内容,请访问我的 个人博客。
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:
或简写为:
指令,如下:
Javascript代码:<div :class="{ 'class-a': isA }">red<div> 复制代码
data: { isA: false //当isA改变时,将更新class } 复制代码
- wx,如下:
Javascript代码:<view class="{{ isA ? 'class-a':'' }}">red<view> 复制代码
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绑定事件的函数传参数时,可以绑定到元素中,在函数中获取,如下:
Javascript代码:<view bindtap="changeTab()" data-tab="1">嚯嚯</view> 复制代码
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
。