微信小程序day01_12之小程序视图层数据绑定

比眉伴天荒 2022-03-14 15:54 325阅读 0赞

### 文章目录 ###

*   *   *  一. 数据绑定
         *   *  1. 简单绑定
             *  2. 属性绑定
             *  3. 关键字
             *  4. 三元运算符
             *  5. 算数运算
             *  6. 字符串运算

本文代码 : [https://gitee.com/jaythc/wxxcx\_learen/tree/master/day01/day01\_12/ownPageLife][https_gitee.com_jaythc_wxxcx_learen_tree_master_day01_day01_12_ownPageLife]

### 一. 数据绑定 ###

WXML 中的动态数据均来自对应 Page 的 data。

#### 1. 简单绑定 ####

数据绑定使用 Mustache 语法（双大括号）将变量包起来.  
例如在wxml中代码如下

Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        msg : "888888"
      },
    }

在模拟器中显示如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]

#### 2. 属性绑定 ####

把数据绑定在标签的属性中

Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        msg : "888888",
        testid: "10000"
      }
    }

显示效果如下  
![2019030619274755.png][]

#### 3. 关键字 ####

关键字(需要在双引号之内)  
true：boolean 类型的 true，代表真值。  
false： boolean 类型的 false，代表假值。

代码示例

在js中进行绑定如下

data: { 
        msg : "888888",
        testid: "10000",
        flag : true,
        unflag : false
      }

在页面的复选框中,显示如下 : 代表成功对复选框进行了动态的是否选中的赋值 .  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]

**特别注意：不要直接写 checked=“false”，其计算结果是一个字符串，转成 boolean 类型后代表真值。**

#### 4. 三元运算符 ####

在wxml中代码如下

{
       {a+b==3 ? '是3' : '不是3'}}

在js中进行如下的a , b,c的数据定义  
![20190306194420353.png][]  
最终页面显示的效果如下 , 代表成功进行了三元表达式的判断  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]

#### 5. 算数运算 ####

在wxml中写如下的代码  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]  
在js中定义如下:  
![20190306194916667.png][]  
在页面中显示的效果如下 : 代表是字符之间用+ 拼接  
![20190306195003461.png][]

#### 6. 字符串运算 ####

在 wxml中定义如下

<view>{
       {"hello" + name}}</view>

在js中定义如下

Page({ 
      data: { 
        name: 'MINA'
      }
    })

在页面中,显示如下图 所示 :  
![20190306195454547.png][]

[https_gitee.com_jaythc_wxxcx_learen_tree_master_day01_day01_12_ownPageLife]: https://gitee.com/jaythc/wxxcx_learen/tree/master/day01/day01_12/ownPageLife
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220312/a715c931a9794574b62a0cc038aaaf2b.png
[2019030619274755.png]: /images/20220312/e5896fc2064e40e8babdd89989ceaca5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220312/69f20448c350422393c7f3a5c1ec6fc3.png
[20190306194420353.png]: /images/20220312/10f4e75f4de0422aba81c98287599e12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20220312/2178d130ded94bf18ca069bec793e65a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20220312/17ae781fd6af41b795fd04ec68f4ba04.png
[20190306194916667.png]: /images/20220312/7b7bab51bf4c48928baca4bdebd2eb90.png
[20190306195003461.png]: /images/20220312/bd234452e5cd4b5eaedc8d6e309d34c5.png
[20190306195454547.png]: /images/20220312/6cbe93b31fe14c578d08026ebc71c84b.png