模板语法数据绑定简单运算(表达式列表渲染)循环)数组列表)循环对象)列表循环block标记条件渲染wx:ifhidden如何用于什么场景(if/if )
微信小程序使用模板语法实现页面的渲染和动态功能
数据绑定
普通数据绑定
以json格式通过数据名称在页面上显示数据
在页面的js文件中编写Page方法，在Page方法中编写data属性，在data属性中写入json数据page((/方法data: )//属性msg:'hello )、//bool型人员： (//对象Object型age:12、//对象属性height:180、weight:160、 name:'fzdzfj' } } } )添加到wxml文件-对象类型--view { { person.age }/view view { { person.height }/view view viewview{Person} -选项卡的属性使用页上只能显示自定义属性的几个字。 打开调试器的wxml页中的data属性用双引号引起了数字注意：数据名称。 --view data-num='{{num}} '自定义属性/view！ 使用bool类型作为属性。 复选框checkbox是一个复选框，默认情况下处于禁用状态。 如果不在“”和{}之间加空格，true将无法识别。 --view checkbox/checkboxchecked=' true '/check BOD-- checkbox checked=' { { is gril } } '/checkbox/view简介
公式：数值运算、字符串拼接、逻辑运算、三元公式
！ -数值运算---view{{1}/view！ -字符串拼接--view{{'a' 'b'}}/view！ -三元运算符--view{{11%2==0？ “偶数' : '奇数' }}/view列表呈现(循环)语句： if else、switch、do while、for
数组和对象循环
数组循环wx:for='{{数组或对象}}数组的名称wx:for-item='循环条目的名称'数组中条目的值wx:for-index='循环条目的索引一般来说，wx:for-item=“item”和wx:for-index='index”可以省略书写，小程序默认将循环项目的名称和索引的名称设定为item和index
阵列： [ 1，2，3，4，5 ]、/数值阵列list:[ //对象阵列{ id:1，name:'fndmb' }、{ id:2， name3360'jjdllay] -数组列表循环wx:for='{{数组或对象}}数组的名称wx:for-item='循环条目的名称'数组中条目的值wx : for -数组值，list是数组，item需要值、Object对象和.属性- -值： {{item.name}} /view/view！ -- array是数组，{{index}}是下标，{{item}}是数组值--view wx : for=' { { array } } ' { index } { { ite } }
m}} </view>wx:key ⽤来提⾼数组渲染的性能
wx:key 绑定的值?有如下选择
页面.js
Page({ //方法 data: { //属性 person:{ //对象Object类型 age:12, //对象属性 height:180, weight:160, name:"fzdzfj" } } })页面.wxml
<!-- 对象列表循环 --><view> <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age" >属性：{{key}}值：{{value}} </view></view> block标签 占位符标签写代码的时候能看到页面渲染 显示的时候不显示将view改成block
<!-- block标签 --><view> <block wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age" >属性：{{key}}值：{{value}} </block></view>block标签类似文本框,不存在换行
view标签,一个数据在一行
控制台中,block标签内不显示标签,只显示数据
在框架中，使⽤ wx:if="{{condition}}"
来判断是否需要渲染该代码块：
后期可以把true/false改成bool类型变量,
<!-- 条件渲染 --><!-- wx:if={{true/false}} --><view> <view>wx:if</view> <!-- 显示在页面上 --> <view wx:if="{{true}}">显示</view> <!-- 页面上不显示 --> <view wx:if="{{false}}">隐藏</view> </view><!-- if elif else 用法 --><view> <view>if elif else</view> <!-- 不显示 --> <view wx:if="{{false}}">1</view> <!-- 不显示 --> <view wx:elif="{{false}}">2</view> <!-- 显示 --> <view wx:else>3</view></view>wx:if 是把标签从页面结构移除,看下图控制台的wxml页面结构输出, 性能消耗大
hidden类似 wx:if,但是不涉及页面结构移动,只是样式上的改变
hidden属性不能和display 样式一起使用,会产生混乱
<!-- hidden--><!-- 在标签上直接加上属性hidden,标签内部的内容就不显示了 --><view hidden>hidden</view><!-- hidden="{{true}}" true标签内容不显示,false标签内容显示 --><view hidden="{{false}}">hidden</view> 什么场景下用哪个(if/hidden)1当标签不是频繁的切换显示优先使用 wx :if直接把标签从页面结构给移除掉,性能损耗大
2当标签频繁的切换显示的时候优先使用hidden通过添加样式的方式来切换显示
频繁切换⽤ hidden
不常使⽤, ⽤ wx:if