以components中创建的BlockComp 和pages中的features为例
features.json
{
"usingComponents": {
"if-comp":"/components/IfComp/IfComp",
"for-comp":"/components/ForComp/ForComp",
"block-comp":"/components/BlockComp/BlockComp"
},
"navigationBarTitleText": "语法特点",
"navigationBarBackgroundColor": "#FFF",
"navigationBarTextStyle": "black"
}
features.wxml
<view>===========条件渲染=============</view>
<if-comp />
<view>===========循环遍历=============</view>
<for-comp />
<view>===========空标签=============</view>
<block-comp></block-comp>
BlockComp.wxml
<block wx:for="{
{list}}" wx:key="*this">
<!-- {
{index}}-{
{item}} -->
<view>{
{index}}-{
{item}}</view>
</block>
<view>
<block wx:if="{
{count >= 10}}">两位数:{
{count}}</block>
<block wx:elif="{
{count >= 5 && count <10}}">个位数(5-9):{
{count}}</block>
<block wx:else>个位数(0-5):{
{count}}</block>
</view>
<text class="btn" bindtap="rand">随机数2</text>
BlockComp.wxss
.btn{
border: 1px solid #000;
background: #fafafa;
padding: 2px 6px;
}
BlockComp.js
Component({
data:{
list:["a","b","c"],
count:0
},
methods:{
rand(){
this.setData({
count:Math.floor(Math.random()*15)
})
}
}
})
block 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
以上面for循环遍历为例,使用view时,查看调试器中的Wxml如下图所示
当使用block时,如下图所示
所以,个人感觉使用block可以在控制台更简洁直观看到运行结果。比起view这些组件,block更注重实现if判断、for循环遍历这一类方法,而不是强调组件名称。
运行效果