微信小程序5---渲染标签及模板引用

1.渲染标签
A. 简单的显示隐藏

a.写法:

<text wx:if="{{true}}">{{text}}</text>

<text wx:if="{{false}}">{{text}}</text> 

显示应为:

false则相反)

 

b.写法:

wxml页面:<text wx:if="{{show}}">{{text}}</text>

Js页面:

A. 动态的显示隐藏

wxml页面:<view wx:if="{{show}}">{{text}}</view> 

 

Js页面:

1.在data中先设置show的布尔值

2.btnClick:function(){}中进行变量接收,并在设置新内容中,接收show的相反值,使其能够显示

A. If判断标签:

wxml页面:<text wx:if="{{show}}">{{text}} 1</text> 

wxml页面:<view wx:else>{{text}} 2</view> 

//表示:

如果是if 接收某值并显示。Else则接收显示另一个值

 

B. For循环:

1.在data中填入数组名及值

2. 在事件中

注:<view wx:for="{{news}}" wx:for-item="vssv" wx:key="*this" wx:for-index="ix">中的 wx:key="*this" 必须带上,

 wx:key="*this" 保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,确保是重新排序而不是创建

 wx:key="property" property 的值需要是列表中唯一的字符串或数字,且不能动态改变

wx:key="userInfoListld" 可以去掉warning

 

 

Js的Array方法也是可以直接套用的

2.模板使用(某一段代码需要复用的时候使用)

A. 引入方法在页面顶部用 include单标签引入

a. 语法:

<include src=文件路径/>

b. 例如:引入头部文件

①建立头部文件:类型为wxml,内容为<text>头部的组件</text>

②引入到所需的文件中:<include src=..header/>

c. 正常显示应为


猜你喜欢

转载自blog.csdn.net/weixin_39087035/article/details/79572328