数据绑定

.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:if
wx:if：直接将标签从页面结构中移除
2、当标签频繁的切换显示的时候，优先使用hidden
hidden：通过添加样式的方式来切换显示(display:none;)
因此hidden属性不要和display一起使用