数据绑定，运算，列表渲染，对象渲染，条件渲染

1.数据绑定：

		1.text标签相当于web中的 span 标签，行内元素 不会换行
		2.view标签相当于web中的 div标签 ，块级元素 ，会换行
		3.checkbox是复选框和web中的一样

<view>数据绑定</view>
<text>1</text>
 <text>2</text>
 <view>1</view>
 <view>2</view>

效果：

.js文件的data中存储数据（可以存对象，数组，布尔类型的值，字符串，数字等）`

data: {
      msg:"hello mina",
      num:10000,
      isGirl:false,
      person:{
        age:74,
        height:145,
        weight:200,
        name:"富婆"
      },
      isTrue:true,
      isChecked:false,

  },

<!-- 1.字符串 -->
 <view>{{msg}}</view>

 <!-- 2.数据类型 -->
 <view> {{num}}</view>

 <!-- 3.bool类型 -->
 <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>

bool类型充当属性 checked：

<view>
     <checkbox checked="{{isChecked}}"></checkbox>
 </view>

①字符串和花括号之间一定不要存在空格否则会导致识别

以下是错误示范:
<checkbox checked="    {{isChecked}}"> </checkbox>

2.运算：

		1.可以在花括号中加入表达式
		2.表达式指的是一些简单的运算，数字运算，字符串拼接，逻辑运算，
		3.可以进行：①数字加减    ②字符串拼接    ③三元表达式
		4.加入语句会报错：如： if else     switch    do while     for

<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<view>{{ 11%2==0 ? '偶数':'奇数'}}</view>

3.列表渲染：

	1.wx:for="{{数组或者对象}}"  wx:for-item="循环项的名称" wx:for-index="循环项的索引"
	2.wx:key="唯一的值" 用来提高列表渲染的性能
	3.wx:key 绑定一个普通字符的时候，绑定的字符必须是循环数组对象中的唯一属性
    4.wx:key="*this"就表示你的数组是一个普通数组*this表示循环项
    5.普通数组：[1,2,3,44,555]    ["1","2","aaaaffff"]
    6.当出现数组的嵌套循环，尤其要注意一下绑定的名称，不要重名
    wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx-key="id"
    7.默认情况下我们不写，wx:for-item="item" wx:for-index="index",小程序
    也会显示循环项的item和index，只有一层循环的话(wx:for-item="item" wx:for-index="index")可以省略

list:[
        {
          id:0,
          name:"猪八戒"
        },

        {
          id:1,
          name:"孙悟空"
        },
        {
          id:2,
          name:"沙僧"
        }
      ]

<view>
    <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
        索引：{{index}}
       _----------------
        值：{{item.name}}
    </view>

</view>

4.对象循环：

	1.wx:for="{{对象}}" wx:for-item="对象的值"  wx:for-index="对象的属性"
	2.循环对象的时候，最好把item和index的名称修改一下
	 wx:for-item="value"  wx:for-index="key"

wx:key的值是唯一的

<view>
    <view>对象循环 </view>
    <view wx:for="{{person}}"  wx:for-index="key" wx:for-item="value" wx:key="name">
    属性：{{key}}
    --
    值：{{value}}
   </view>
</view>

5.block:

	1.占位符标签
	2.写代码的时候可以看到标签的存在
	3.页面渲染时，小程序会把它移除掉

<view>
    <view>block </view>
    <block wx:for="{{person}}"  wx:for-index="key" wx:for-item="value" wx:key="name">
    属性：{{key}}
    --
    值：{{value}}
    </block>
</view>

6.条件渲染：

1.wx:if="{{true/false}}"
2. wx:if
   wx:elif
   wx:else
3.hidden
  ①在标签上直接加入属性 hidden
  ②hidden="{{true}}"
 4.当标签不是频繁的切换显示，优先使用wx:if——原理：直接把标签从页面结构中移除掉
 频繁切换使用 用hidden——原理：通过添加样式的方式来切换显示(display:none)
 注：hidden不要和样式display一起使用，hidden将无效

   <view>
       <view>条件渲染</view>
       <view wx:if="{{true}}">显示</view>
       <view wx:if="{{false}}">隐藏</view>
       <view>-------------------------</view>
       <view wx:if="{{false}}">1</view>
       <view wx:elif="{{false}}">2</view>
       <view wx:else>    3    </view>
       <view>------------------------</view>
       <view hidden>hidden11</view>
       <view hidden="{{false}}"> hidden22</view>
 </view>

显示：