模板語(yǔ)法

1.準(zhǔn)備工作

.wxml標(biāo)簽

相當(dāng)于行內(nèi)標(biāo)簽，多放不會(huì)換行

默認(rèn)是塊級(jí)元素會(huì)換行

.jso文件中：輸入Page可以重新找回初始化函數(shù)

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

1.在頁(yè)面的.js文件中的data{}字段，可以通過該字段添加數(shù)據(jù)，在wxml中進(jìn)行使用以及標(biāo)簽綁定

對(duì)于.js文件

data: {str1:"damin",//字符串num:1000,//數(shù)字person:{name: "haha",age:12,hobby:"打籃球"},//對(duì)象isTrue:true//布爾},

它的.wxml文件

<!-- 在wxml對(duì)數(shù)據(jù)進(jìn)行輸出 --> <text>{{str1}}</text> <view>{{num}}</view> <!-- 在屬性上使用，注意屬性空格會(huì)使bool失效 --> <checkbox checked="{{isTrue}}"></checkbox> <!-- 對(duì)象的輸出，直接輸出未指針，需要person.sth --> <view>{{person}}</view> <view>{{person.age}}</view> <view>{{person.hobby}}</view> <view>{{person.name}}</view>

效果：

3.運(yùn)算問題

在花括號(hào)中可以使用字符串拼接，±運(yùn)算，三元運(yùn)算，不能使用語(yǔ)句（if for等）

{{1+1}}

{{‘1’+‘1’}}

{{10%2===0?‘偶數(shù)’:‘奇數(shù)’}}

4.列表渲染（數(shù)組和對(duì)象循環(huán)）

目的：在data字段中 對(duì)list數(shù)組在wxml中用wx：for進(jìn)行遍歷

基本格式

<view wx:for="{{list}}"wx:for-item="item"wx:for-index="index">索引：{{index}}--值 :{{item.name}} </view> data: {list:[{id:0,name:"豬八戒"},{id:1,name:"天蓬元帥"},{id:2,name:"豬悟能"}]},

wx:for:表示需要重復(fù)渲染的數(shù)組

wx:for-item=“i”:表示每個(gè)單獨(dú)的數(shù)組中的元素所定義的變量->(也就是foreach循環(huán)中int i ：a[ ]的i)

wx:for-index:表示下標(biāo)的變量

wx:key=" ":表示數(shù)組中的唯一值

注意：嵌套循環(huán)時(shí) item和index不要重名，并且默認(rèn)情況就叫item和index。

當(dāng)遍歷對(duì)象信息時(shí)：item代表對(duì)象，index代表屬性

<view wx:for="{{person}}" wx:key="*this"> {{index}} {{item}} </view> person:{name: "haha",age:12,hobby:"打籃球"}//對(duì)象

最終效果如下

4.2block標(biāo)簽：占位符，頁(yè)面渲染時(shí)會(huì)移除，當(dāng)你不想額外加一層view進(jìn)行循環(huán)時(shí)，用black可以進(jìn)行代替，在調(diào)試器中不會(huì)顯示，但缺點(diǎn)是內(nèi)容只占一行，不進(jìn)行換行處理

5條件渲染

5.1wx:if

<-- 值為true，標(biāo)簽顯示，為fasle，標(biāo)簽隱藏 !-> <view> <block wx:if="{{true}}">標(biāo)簽顯示</block> <block wx:if="{{false}}">標(biāo)簽隱藏</block> </view>

5.1.2嵌套

<view wx:if="{{false}}">1</view> <view wx:elif="{{false}}">2</view> <view wx:else>3</view> 這樣只會(huì)打印3

5.2hidden

<view> <view hidden="{{false}}">false是不隱藏</view> <view hidden>默認(rèn)是隱藏 </view> <view hidden="{{true}}">true也是隱藏</view> </view>

注意：hidden不要和display標(biāo)簽一起使用

false是不隱藏
默認(rèn)是隱藏
true也是隱藏

#### 注意：hidden不要和display標(biāo)簽一起使用

總結(jié)

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

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