微信小程序数据绑定

一. 普通写法

1.

<!--字符串-->
<view>{{message}} </view>

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

2.

<!--数字-->
<view>{{num}} </view>

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

3.

<!--布尔类型 -->
<view>是不是帅哥:{{isgirl}} </view>

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

4.

<!--对象类型 -->
<view>{{person.age}} </view>
<view>{{person.weight}} </view>
<view>{{person.name}} </view>

 

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

二 bool标签的使用

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

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

注意事项：

<!--

    bool属性的使用：需注意字符串和花括号之间不要有空格，否则会出错

    错误范例： <checkbox checked="  {{isfa}}" ></checkbox>

-->

二 运算

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

<view>{{2*9}} </view>
<view>{{"xg"+"hu"}} </view>

2.三元表达式

<!--三元表达式-->
<view>{{1001%2==0?"偶数":"奇数"}} </view>

意思是：如果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一起使用

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

<view hidden="{{false}}">123456</view>
  <view wx:if="{{true}}">今天真好</view>
  <view wx:if="{{false}}">今天不好</view>
  <view hidden="{{true}}"> 1233</view>
  <view hidden="{{false}}">8965</view>

四 for循环

<!--列表

for循环：wx:for="{{数组或对象}} ",wx:for-item="循环项的名称"，wx:for-index="循环项的索引"

2.wx:key="唯一值"，提高列表的渲染效果

wx:key 绑定的值 有如下选择：1.string 类型， 这个字符串是循环项数组中的唯⼀属性 

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

                           3.如[1,2,3,4]，["1","222","abdef"]这种类似的就要使用*this

3.当出现数组的嵌套循环的时候，尤其注意以下绑定的名称，不要重名

 wx:for-index="index" wx:for-item="item"

4.默认情况下。我们不写 wx:for-index="index" wx:for-item="item"

小程序也会把循环项的名称和循环索引默认为item和index。

只有一层循环的话 wx:for-index="index" wx:for-item="item"可以省略

-->

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

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