微信小程序中的数据绑定

 在微信小程序中过使用的是WXML语言，下面介绍一些关于这个语言的特性，在数据绑定中Wxml中的所有数据都来自于我们pages中的data,在wxml中所有的控制属性都要在一个双引号加两个花括号之间。

一 字符串

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

二 数字

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

三 bool

<!--3bool-->
<view>是否是伪娘:{{isGirl}}</view>

四 boject

先来看看我们的js文件

Page({
  Person:
  {
    age: 19,
    school: "Hust",
    name: "Cheng"
  }
})

下面来看我们的wxml文件

<!--4object-->
<view>{{Person.age}}</view>
<view>{{Person.school}}</view>
<view>{{Person.name}}</view>

五 在标签的属性中使用

这个在页面中是不会显示的，要到控制台去观察能看到data-num 被转化为一个数字

<!--5在标签的属性中使用-->
<view data-num="{{num}}">1</view>

六 使用bool运算

<!--
    6使用bool类型充当属性
    字符串和花括号之间不要使用空格
    -->
<view>
    <checkbox checked="{{ischeck}}"> </checkbox>
</view>

七 使用运算符和表达式

<!--
    7 运算符和表达式
     1 可以在花括号中加入表达式
     2 表达式
        1 数字的加减
        2 字符串的拼接
        3 三元表达式
    3 语句
        1 复杂的代码段
            1 if else
            2 switch
            3 do while
            4 for....
-->
<!--数字运算-->
<view>{{1+1}}</view>

<!--字符串相加-->
<view>{{'1'+'1'}}</view>

<!--判断语句-->
<view>{{10%2==0 ? "偶数":"奇数"}}</view>

<!--if语句-->
<view wx:if="{{num > 100}}"> "ok"</view>

<!--字符串运算,其实就是和string类型是差不多的-->
<view>{{"hello" + name}}</view>

<!--数据的路径运算-->
<view>{{Person.age}} {{array[0]}}</view>

<!其js文件如下-->
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

<!--for循环,item in this place is similar to the *this-->
<view wx: for="{{[0,1,2,3,4]}}">{{item}}</view>

码字不易，求一键三连(^_−)−☆