微信小程序 第三天

组件属性绑定

        ▶他是将data里的数据绑定到微信小程序的组件

        示例代码：

//wxml
<view id="item-{{ id }}"></view>

//js
Page({
    data:{
        id:0
    }
})

控制属性绑定

       ▶它用来进行if语句条件判断，如果条件满足则选择，否则不执行

       示例代码：

//wxml
<view wx:if="{{ condition }}"></view>

//js
Page({
    data:{
        condition:true
    }
})

关键字绑定

        ▶常用于组件的一些关键字

        ▶像复选框组件一样，checked关键字如果等于true，则代码复选框选中；如果等于false，则代表不选中复选框

        示例代码：

        

<checkbox checked="{{false}}"></checked>

        注意：不要直接写checked=“false”，其计算结果是一个字符串，转成boolean类型后代表真值

运算

        ▶可以在{{}}内进行简单的运算

        ▶小程序支持以下几种运算

                ✔三元运算

<view hidden="{{flag ? true:false}}">Hidden</view>

                ✔数学运算

<view> {{ a+b }}+{{ c }}+d</view>


Page({
    data:{
         a:1,
         b:2,
         c:3
    }
})
       //view 中的内容为3+3+d

                ✔逻辑判断

<view wx:if="{{length > 5}}"></view>

                ✔字符串运算

<view>{{"hello"+name}}</view>

Page({
    data:{
        name: '微信小程序！'
    }
})

                ✔数据路径运算

<view>{{ object.key }}{{arrar[0]}}</view>

//js
Page({
    data:{
        key: '微信小程序！'
    },
    array:['hello']
})

条件渲染

▶WX:if判断单个组件

        在微信小程序框架中，使用wx：if=“{{condition}}”来判断是否需要渲染该代码块

        示例代码:

<view wx:if="{{condition}}">True</view>

        使用wx：elif 和wx：else来添加一个else块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

▶block wx:if判断多个组件

        wx:if是一个控制属性，需要将他添加到一个标签上

        如果想一次性判断多个组件标签，可以使用一个<block/>

        标签将多个组件包装起来，并在上吧使用wx:if控制属性

        示例代码：

        

<block wx:id="{{true}}">
    <view>view1</view>
    <view>view2</view>
</block>
//<block/> 不是一个组件，它仅是一个包装元素，不会在页面做任何渲染，只接受控制属性

 block wx:if 示例

<!-- index.wxml -->
<button bindtap="change_color">横条背景变色</button>
<!-- wx:if -->
<block wx:if="{{b==true}}">
    <view class="bg_green"></view>
</block>
<block wx:elif="{{b==false}}">
    <view class="bg_blue"></view>
</block>


//index.js
Page({
    data:{
        b:false
    },
    change_color:function(){
        var ab = this.data.b;
        this.setData({
            b:!ab
        })
    }
})


/**index.wxss**/
.bg_green{
    height:100rpx;
    background:green;
}
.bg_blue{
    height:100rpx;
    background:blue;
}

示例代码效果：