wxml里面有很多類似Vue的語法。

數據綁定

比如數據綁定，在js里面的data里面寫。

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

只要通過差值表達式，就可以將數據渲染到頁面里。

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

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

wx:if的使用

等效于Vue中的v-if

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

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

同時還有wx:elif 和 wx:else。

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

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

對，沒錯，就是只顯示周三。

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

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

<view hidden="{{true}}"> 測試 </view>

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

wx:for的使用

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

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

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

遍歷后的結果：

wx:key 是用來指定列表中項目的唯一的標識符，可以指定它為this。保留關鍵字 this 代表在 for 循環中的 item 本身。

wxml里面有很多類似Vue的語法。

數據綁定

比如數據綁定，在js里面的data里面寫。

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

只要通過差值表達式，就可以將數據渲染到頁面里。

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

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

wx:if的使用

等效于Vue中的v-if

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

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

同時還有wx:elif 和 wx:else。

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

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

對，沒錯，就是只顯示周三。

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

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

<view hidden="{{true}}"> 測試 </view>

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

wx:for的使用

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

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

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

遍歷后的結果：

wx:key 是用來指定列表中項目的唯一的標識符，可以指定它為this。保留關鍵字 this 代表在 for 循環中的 item 本身。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。