发布于2021-09-15 22:18 阅读(321) 评论(0) 点赞(5) 收藏(4)
wx:for
控制属性绑定一个数组, 即可使用数组中各项的数据重复渲染该组件index
, 数组当前项的变量名默认为item
index.js
中我们定义以下数据 data: {
arr: ["路明非", "楚子航", "凯撒", "芬格尔"],
},
编写index.wxml
文件代码如下
<!-- 列表渲染测试 -->
<view class="goStudy" wx:for="{{arr}}">
<text>{{item}} {{index}}</text>
</view>
运行效果:
在index.js
data属性中添加以下数据
arr_obj: [{
name: "路明非",
blood: "S"
},
{
name: "楚子航",
blood: "A"
},
{
name: "凯撒",
blood: "A"
},
{
name: "芬格尔",
blood: "F"
}]
<!-- 列表渲染测试 -->
<view class="goStudy" wx:for="{{arr_obj}}">
<text>姓名:{{item.name}},血统: {{item.blood}}级 </text>
</view>
wx:for-item
可以指定数组当前元素的变量名,wx:for-index
可以指定数组当前下标的变量名:<view class="goStudy" wx:for="{{arr}}" wx:for-index="arr_index" wx:for-item="arr_item">
<text>{{arr_item}},{{arr_index}}</text>
</view>
可以将 wx:for
用在<block/>
标签上,以渲染一个包含多节点的结构块。例如:
<block wx:for="{{arr}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
渲染效果:
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 wx:key
来指定列表中项目的唯一的标识符。
wx:key
的值以两种形式提供:
array
中的item
的某个property
, 该property
的值需要是列表中唯一的字符串或数字, 且不能动态改变*this
代表在for
循环中item
本身, 这种表示需要item
本身是一个唯一的字符串或数字 <view class="goStudy" wx:for="{{arr}}" wx:key="item">
<text>{{item}}</text>
</view>
wx:for
的值为字符串时,会将字符串解析成字符串数组<view class="goStudy" wx:for="abc">
<text>{{item}}</text>
</view>
等同于
<view class="goStudy" wx:for='{{ ["a","b","c"] }}'>
<text>{{item}}</text>
</view>
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}" >
{{item}}
</view>
wx:if=""
来判断是否需要渲染该代码块:<view wx:if="{{condition}}"> True </view>
data: {
isShow:true,
},
如果将isShow
的值改为false
, 那么 包含True
字符的组件就不会再被渲染
例一: wx:elif
<!-- 条件渲染测试- wx:elif -->
<view wx:if="{{isShow}}"> True </view>
<view wx:elif="{{!isShow}}">False</view>
例二: wx:else
data: {
flag: 1,
}
<!-- 条件渲染测试 wx:else -->
<view wx:if="{{flag === 0}}"> {{flag}}</view>
<view wx:elif="{{flag === 1}}">{{flag}}</view>
<view wx:else="{{flag}}">{{flag}}</view>
wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/>
标签将多个组件包装起来,并在上边使用 wx:if
控制属性。<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
<block/>
并不是一个组件,它仅仅是一个包装元素
,不会在页面中做任何渲染,只接受控制属性。wx:if
之中的模板也可能包含数据绑定, 所以wx:if
的条件值切换时, 框架有一个局部渲染的过程, 因为它会确保条件块在切换时销毁或重新渲染wx:if
也是惰性的, 如果在初始渲染条件为 false
, 框架什么也不做, 在条件第一次变成真的时候才开始局部渲染hidden
就简单的多, 组件始终会被渲染, 只是简单的控制显示与隐藏wx:if
有更高的切换消耗hidden
有更高的初始渲染消耗, 因此, 如果需要频繁切换的情景下, 用hidden
更好, 如果在运行时条件不大可能改变则wx:if
较好作者:代码搬运工
链接:http://www.qianduanheidong.com/blog/article/192687/d5df88145a8611aeb149/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!