wxml里面有很多類似Vue的語(yǔ)法。

數(shù)據(jù)綁定

比如數(shù)據(jù)綁定，在js里面的data里面寫。

Page({/*** 頁(yè)面的初始數(shù)據(jù)*/data: {msg:"hello world!",isShow:true,arrayObj:["周一","周二","周三"]}, })

只要通過差值表達(dá)式，就可以將數(shù)據(jù)渲染到頁(yè)面里。

<view>{{msg}}</view> //hello world!

是不是很像Vue里面的new Vue({ }) 里面寫個(gè)data。👱?♀

wx:if的使用

等效于Vue中的v-if

<view wx:if="{{isShow}}">顯示</view> <view wx:if="{{!isShow}}">不顯示</view>

isShow = true ，猜猜顯示哪一個(gè)？你腦中的畫面和下圖一樣嗎。

同時(shí)還有wx:elif 和 wx:else。

today=3，下面的代碼，運(yùn)行后什么樣子，腦子里面有畫面了嗎？

<view wx:if="{{today === 1}}">周一</view> <view wx:elif="{{today === 2}}">周二</view> <view wx:elif="{{today === 3}}">周三</view> <view wx:else>周四</view>

對(duì)，沒錯(cuò)，就是只顯示周三。

Vue里面還有v-show，那么微信小程序里面有沒有wx:show呢？答案是，沒有！

但是它有一個(gè)替代的的屬性 hidden，等效于v-show。

<view hidden="{{true}}"> 測(cè)試 </view>

顯然，上面的代碼跑后就是什么也不顯示，控制臺(tái)的樣式如下圖：

wx:for的使用

wx:for可用于遍歷一個(gè)數(shù)組，通過item訪問元素，index訪問索引（index和item必須放在差值表達(dá)式里面，不然只會(huì)被解析成字符串）

arrayObj=[“周一”,“周二”,“周三”]

<view wx:for="{{arrayObj}}" wx:key="*this" wx:if="{{ index+1 === today ? true : false }}">{{index+1}}. {{item}} </view>

遍歷后的結(jié)果：

wx:key 是用來(lái)指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符，可以指定它為this。保留關(guān)鍵字 this 代表在 for 循環(huán)中的 item 本身。

wxml里面有很多類似Vue的語(yǔ)法。

數(shù)據(jù)綁定

比如數(shù)據(jù)綁定，在js里面的data里面寫。

Page({/*** 頁(yè)面的初始數(shù)據(jù)*/data: {msg:"hello world!",isShow:true,arrayObj:["周一","周二","周三"]}, })

只要通過差值表達(dá)式，就可以將數(shù)據(jù)渲染到頁(yè)面里。

<view>{{msg}}</view> //hello world!

是不是很像Vue里面的new Vue({ }) 里面寫個(gè)data。👱?♀

wx:if的使用

等效于Vue中的v-if

<view wx:if="{{isShow}}">顯示</view> <view wx:if="{{!isShow}}">不顯示</view>

isShow = true ，猜猜顯示哪一個(gè)？你腦中的畫面和下圖一樣嗎。

同時(shí)還有wx:elif 和 wx:else。

today=3，下面的代碼，運(yùn)行后什么樣子，腦子里面有畫面了嗎？

<view wx:if="{{today === 1}}">周一</view> <view wx:elif="{{today === 2}}">周二</view> <view wx:elif="{{today === 3}}">周三</view> <view wx:else>周四</view>

對(duì)，沒錯(cuò)，就是只顯示周三。

Vue里面還有v-show，那么微信小程序里面有沒有wx:show呢？答案是，沒有！

但是它有一個(gè)替代的的屬性 hidden，等效于v-show。

<view hidden="{{true}}"> 測(cè)試 </view>

顯然，上面的代碼跑后就是什么也不顯示，控制臺(tái)的樣式如下圖：

wx:for的使用

wx:for可用于遍歷一個(gè)數(shù)組，通過item訪問元素，index訪問索引（index和item必須放在差值表達(dá)式里面，不然只會(huì)被解析成字符串）

arrayObj=[“周一”,“周二”,“周三”]

<view wx:for="{{arrayObj}}" wx:key="*this" wx:if="{{ index+1 === today ? true : false }}">{{index+1}}. {{item}} </view>

遍歷后的結(jié)果：

wx:key 是用來(lái)指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符，可以指定它為this。保留關(guān)鍵字 this 代表在 for 循環(huán)中的 item 本身。

總結(jié)

以上是生活随笔為你收集整理的微信小程序_wxml学习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。