数据绑定
.js
Page({ /** * 页面的初始数据 */ data: { msg:"hello mina", num:10000, isGirl:false, person:{ age:78, height:188, weight:166, name:"迷人软" }, isChecked:false },}).wxml
<!-- 1 字符串 --><view>{{msg}}</view><!-- 2 数字类型 --><view>{{num}}</view><!-- 3 布尔类型 --><view>是否是伪娘：{{isGirl}}</view><!-- 4 object类型 --><view>{{person.age}}</view><view>{{person.height}}</view><view>{{person.weight}}</view><view>{{person.name}}</view><!-- 5 在标签的属性中应用 --><view data-num="{{num}}">自定义属性</view><!-- 6 应用bool类型充当属性 checked 1、字符串和花括号之间肯定不要存在空格 否则会导致辨认失败--><checkbox checked="{{isChecked}}"></checkbox>运算
.wxml
<!-- 运算 表达式 1、数字的加减 2、字符串拼接 3、三元表达式--><view>{{1+1}}</view><view>{{'1'+'1'}}</view><view>{{ 10%2===0 ? '偶数' : '奇数' }}</view>列表渲染
- 数组循环
<!-- 数组循环 1、wx:for="{{数组或对象}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引" 2、wx:key="惟一的值" 用来进步列表渲染的性能 1、绑定一个一般字符串时，这个字符串名称必定是循环数组中对象的惟一属性 2、wx:key="*this" 示意数组是一个一般数组 *this示意是循环项 [1,222,322,45] ["1","adx","aaa3","aeerr"] 3、当呈现数组的嵌套循环的时候 要留神以下绑定的名称不要重名 wx:for-item="item" wx:for-index="index" 4、只有一层循环(wx:for-item="item" wx:for-index="index") 能够省略,小程序会默认设置成item和index--><view><view>数组循环</view> <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id" > 索引：{{index}} -- 值：{{item.name}} </view></view>Page({ /** * 页面的初始数据 */ data: { list:[ { id:0, name:"路飞" }, { id:1, name:"乔巴" }, { id:2, name:"索隆" } ] },})- 对象循环
<!-- 对象循环 1、wx:for="{{对象}}" wx:for-item="对象的值" wx:for-index="对象的属性" 2、循环对象时,最好更改 item 和 index 的名称 wx:for-item="value" wx:for-index="key" --> <view> <view>对象循环</view> <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age"> 属性：{{key}} -- 值：{{value}} </view></view> Page({ /** * 页面的初始数据 */ data: { person:{ age:78, height:188, weight:166, name:"迷人软" } },})- block标签
<block wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id" class="my_list" > 索引：{{index}} -- 值：{{item.name}} </block>条件渲染
- wx:if
<!-- 1、wx:if="{{true/false}}" 2、if,else,if else wx:if wx:elif wx:else--><view> <view>wx:if</view> <view wx:if="{{true}}">显示</view> <view wx:if="{{false}}">暗藏</view> <view wx:if="{{false}}">aaa</view> <view wx:elif="{{false}}">bbb</view> <view wx:else>ccc</view></view>- hidden
<!-- hidden 1、在标签上间接退出属性hidden 2、hidden="{{true}}" --> <view> <view>-----------------------</view> <view>hidden</view> <view hidden >hidden</view> <view hidden="{{true}}">hidden</view> <view hidden="{{false}}">hidden</view></view>场景如何抉择？
1、当标签不是频繁的切换显示，优先应用
wx:ifwx:if：间接将标签从页面构造中移除
2、当标签频繁的切换显示的时候，优先应用hiddenhidden：通过增加款式的形式来切换显示(display:none;)
因而hidden属性不要和display一起应用