模板语法

普通写法

7.1数据绑定

1.其中在xml中
text ----span
view -----div

Page({
  data: {
    msg:"hello world",
    num:10000,
    isGirl:false,
    person:{
      age:10,
      weight:200,
      isGirl:false,
      name:"副本"
    }
  }
});

注意：写在js文件中的东西
2.在xml中写入内容时需要用两个{{}}来表示

 <view>
      {{person.age}}
      {{person.weight}} 
      {{person.isGirl}}  
      {{person.name}} 
  </view>

3.多选框 --checkebox
其中<checkbox checked> <check> 表示被选中
也可以写 checked="{{false}}" 或者 checked="{{true}}"

注意：千万不能写" {{}}" 写成这个样子，他表示的时false

7.2运算

可以在{{}}可以在括号中进行运算
例如：

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

7.3列表渲染

7.3.1.wx:for
循环其中有两个，一个是对象的，另外一个是数组的
----1.对象的循环
wx:for="{{}}" ---里面写入对象
wx:for-item="值名字" ---主要是对象属性的值
wx:for-index ="属性的名字" ---主要是对象的属性的名字
wx:key ---⽤来提⾼数组渲染的性能 其中可以选择属性中的任意名字
代码如下

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

2.数组的循环
跟对象的一样 ，不作出解释请看对象的用法

注意：如果使用嵌套循环的话需要修改item和index中值得名字.

wx:key wx:key ⽤来提⾼数组渲染的性能
wx:key wx:key 绑定的值 有如下选择
1.string string类型，表⽰循环项中的唯⼀属性如

list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
wx:key="id"

2.保留字 *this this ，它的意思是 item item本⾝，this代表的必须是唯⼀的字符串和数组。

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

7.4条件渲染

1.其中是if 和elif ,else

 <view  wx:if="{{false}}"> 123</view>
 <view wx:elif="{{false}}"> 456</view>
 <view wx:else>789</view>

2.还有隐藏hidden
可以直接写入hidden 表示隐藏，加上属性值"{{false}}" 表示不隐藏

 <view hidden="{{false}}"> 
        123
      </view>

hidden和if的区别
1.当频繁切换用hidden 相反用if
2.if的隐藏会在代码中没有 ，但是hidden会有的
3.hidden的隐藏式基于样式的，所以当时用其他样式时会将其消失style:"display:flex;"