微信小程序数据绑定

一. 普通写法

1.

{{message}} 

Page({
  data: {
    message: 'Hello MINA!'
 }
})

2.

{{num}} 

Page({
   data:{
       num:100
}
})

3.

是不是帅哥:{{isgirl}} 

Page({
  data: {
   isgirl: false
 }
})

4.

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

 

Page({
  data: {
    person:
   {
       age :18,
       weight:60,
       name:"帅哥"
   }
 }
})

二 bool标签的使用

Page({
  data: {
    isfa:true
 }
})

注意事项：

二 运算

1 表达式：指的是一些简单运算：如数字运算，字符串的拼接，逻辑运算。可以直接加载{}里面，例如：

{{2*9}} 
{{"xg"+"hu"}} 

2.三元表达式

{{1001%2==0?"偶数":"奇数"}} 

意思是：如果1001%2==0，则输出偶数，否则是奇数。

三 if语句（条件渲染）

11 条件渲染

     1.wx:if="{{true/false}} " 为TRUE时，标签显示，反之隐藏

       2.if else 

    2.hidden

      1.在标签中直接加入属性 hidden

      2.hedden={{true}} 隐藏，反之显示

    3.

      1.当标签不是频繁切换显示，优先使用wx;if

        直接把标签从页面结构中移除

      2.当标签频繁切换，优先使用 hidden 

        hidden不要和样式display一起使用

        通过添加样式的方式来切换显示

  今天真好
  今天不好
  
  

四 for循环

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

list:[
     {
       id :0,
       name :"皮卡丘"
     },
     {
       id:1,
       name:"电缆"
     },
     {
       id:2,
       name:"天棚"
     }
   ]