微信小程序基础开发(二)----模板语法

数据绑定

.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg:"hello mina",
    num:10000,
    isGirl:false,
    person:{
         age:78,
         height:188,
         weight:166,
         name:"迷人软"
    },
    isChecked:false
  },
})

.wxml

{{msg}}

{{num}}

是否是伪娘：{{isGirl}}

{{person.age}}
{{person.height}}
{{person.weight}}
{{person.name}}

自定义属性

---

运算

.wxml

{{1+1}}
{{'1'+'1'}}
{{ 10%2===0 ? '偶数' : '奇数' }}

列表渲染

• 数组循环

数组循环
 
     索引：{{index}}
     --
     值：{{item.name}}
    

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {
        id:0,
        name:"路飞"
      },
      {
        id:1,
        name:"乔巴"
      },
      {
        id:2,
        name:"索隆"
      }
    ]
  },
})

• 对象循环

 
 
 对象循环
 
      属性：{{key}}
      --
      值：{{value}}
    
 

Page({
  /**
   * 页面的初始数据
   */
  data: {
    person:{
         age:78,
         height:188,
         weight:166,
         name:"迷人软"
    }
  },
})

• block标签

     索引：{{index}}
     --
     值：{{item.name}}
    

---

条件渲染

• wx:if

    wx:if
    显示
    隐藏

    aaa
    bbb
    ccc

• hidden

 
    -----------------------
    hidden
    
      
    

场景如何选择？

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