在小程序中 标签就是HTML中的 div 标签
插值:就是在当前的页面中的js文件里的 data 属性 里的 变量
当wxml 调用这个变量即可 调用的格式 {{ msg }}

文字插值

  1. {{username}}

图片插值普通

  1. <image src="/images/me.png"></image>

图片插值进阶

三目运算符

  1. <image src="{{ispandu ? '/images/about.png' : '/images/about1.png'}}"></image>

同时支持, {{10+100}}

创建对象

在标签中创建对象, 可获取

  1. <view wx:for="{{ {username:'学生',age:18 } }}"></view>

wx:for 列表渲染

自定义 初始数据 这个是js 文件

  1. Data:{
  2.  list:[
  3.       {username:"你好世界",type:"2020"},
  4.       {username:"你好未来",type:2021},
  5. }

调用 List 是data中的 数组 这个是wxml文件

  1. <view wx:for="{{list}}" wx:key="index" bindtap="BtnListClick">
  2.   <text>{{item.type}}</text>
  3.   <text>{{item.username}}</text>
  4. </view>

is态决定具体需要渲染哪个模板

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

  2. <template name="odd">
  3.   <view> odd </view>
  4. </template>
  5. <template name="even">
  6.   <view> even </view>
  7. </template>
  9. <block wx:for="{{[1, 2, 3, 4, 5]}}">
  10.   <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
  11. </block>

注意:默认值

修改item 默认值
wx:for-item=”i”
修改 index 默认值
wx:for-index=”is”

  1. <view wx:for="{{list}}" wx:for-index="i" wx:for-item="is" wx:key="i">
  2.     <text>{{is.username}}--{{i}}</text>
  3. </view>

wx:if 条件渲染

wx:if wx:elif wx:else
当第一个条件成立,则不会再判断下一条.当前面2条都不成立,则 显示第三个

  1. <view wx:if="{{!ispandu}}">你好1</view>
  2. <view wx:elif="{{ price==1000}}">你好2</view>
  3. <view wx:else="{{ispandu}}">你好3</view>

hidden与if区别

标签中 含有 hideen 属性的时候, 当加载当前页面挂载时,会把有 hideen 的属性的标签 ,全部渲染到dom ,而视图层按条件成立才显示
标签中 含有If 属性的时候, 视图层显示什么的dom 也是显示同样的

注意

区别：
wx:if 是遇 true 显示，hidden 是遇 false 显示。
wx:if 在隐藏的时候不渲染，而 hidden 在隐藏时仍然渲染，只是不呈现。
所以如果频繁切换的话，用 wx:if 将会消耗更多资源，因为每次呈现的时候他都会渲染，每次隐藏的时候，他都会销毁。

如果切换并不频繁的话，用 wx:if 相对来说较好些，因为它会避免初始就一下渲染那么多。
image.png
image.png
image.png