微信小程序数据绑定和条件渲染

数据绑定：

<view>
    name:"{{name}}"
</view>
 

然后去js的data里写上 name:"mary"

wxml数据绑定：

运用js的data对象完成wxml数据的动态显示。

绑定分类：基础绑定，组件绑定

属性设定：需在双引号内，运算符的操作

小程序数组的写法：

data:[1,2,3,4],
data2:["tom","marry"],
data3:[{name:"tom",age:25},{name:"mom",age:35}]

条件渲染：

wx:if用来判断是否需要渲染该代码，也可以用wx:else 和wx:else来写else语句。

Block:wx:if

举个例子：

<view wx:if="{{score > 90}}">
奖励你
</view>
<view wx:elif="{{score > 60}}">
下次加油
</view>
<view wx:else>
等着挨打吧
</view>

列表渲染：

<view>列表渲染</view>
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itm">
{{idx}}:{{itm}}
</view>

在js里定义array:[1,2,3,4],就相当于循环打印了。item相当于元素，index相当于下标。

再来一个九九乘法表：

 
    <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-index="idx1" wx:for-item="itm1">
    <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-index="idx2" wx:for-item="itm2">
        <view wx:if="{{itm1 <= itm2}}">
        {{itm1}} * {{itm2}}= {{itm1*itm2}}
        </view>
    </view>
    </view>