wxml

1、标签中数据绑定

• 示例 属性名 = "{{变量或表达式}}"
• 绑定属性变量时，双引号与变量之间不能够有空格，否则会影响bool值判断

  <view>
    <!-- 双大括号和双引号之间不能够有空格，否则会影响bool值判断 -->
    <checkbox checked=" {{false}}"></checkbox>
    <checkbox checked="{{false}}"></checkbox>
  </view>

2、列表渲染

• vue列表渲染示例

<div v-for="(item, index) in list"  :key="index" >

• 小程序对应示例
• wx:for="{{数组或者对象}}"
• wx:for-item= "循环项名称，默认为item"
• wx:for-index ="{{循环项索引名，默认为index}}"
• wx:key = "{{唯一标识，普通数组时传入 *this,对象数组时传入对象的属性名}}" -->

<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">

- 对象循环时，wx:for-index表示属性名，wx:for-item表示属性值

  <view>
      <!-- 1、wx:for="{{数组或者对象}}" wx:for-item= "循环项名称，默认为item" wx:for-index ="{{循环项索引名，默认为index}}"  -->
      <!-- 2: wx:key = "{{唯一标识，普通数组时传入 *this,对象数组时传入对象的属性名}}" -->
      <!-- 3:对象循环时，wx:for-index表示属性名，wx:for-item表示属性值 -->
      <view wx:for="{{list0}}" wx:key="*this">
        索引：{{index}}  value: {{item}}
      </view>        
      <view wx:for="{{list1}}" wx:for-item="person" wx:for-index="index111" wx:key="id">
        索引：{{index111}}  name: {{person.name}}
      </view>  
      <view wx:for="{{person}}" wx:key="age">
        属性名:{{index}}  属性值：{{item}}
      </view>  
      <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age">
        属性名:{{key}}  属性值：{{value}}
      </view>       
  </view>      

Page({
    data: {
        person:{
          age:88,
          name:"汉升",
          height:177,
          weight:80
        },
        list0:[1,2,'heiehi',true],
        list1:[
            {
                id:11,
                name:'唐僧'
            }, {
                id:22,
                name:'悟空'
            }, {
                id:33,
                name:'八戒'
            }, {
                id:44,
                name:'沙僧'
            }, {
                id:55,
                name:'白龙'
            },
        ]
    },
});

3、条件渲染

• wx:if 相当于 v-if
• 标签上直接加属性hidden，相当于v-show
• wx:elif="{{true/false}}"
• wx:else
• hide = "{{false/true}}"

  <!--1、 wx:if="{{true/false}}" 相当于v-if-->
  <!--2、 wx:elif="{{true/false}}"  -->
  <!--3、 wx:else -->
  <!-- 标签上直接加属性hidden，相当于v-show -->
  <!-- hide = "{{false/true}}" -->
  <view wx:if="{{false}}">看得到吗</view>
  <view wx:if="{{true}}">试试看</view>
  <view hidden>hiden</view>
  <view hidden="{{false}}">hiden测试</view>