微信小程序(五)_数据绑定

数据绑定作为,逻辑与界面分离的框架当中,是一种不可或缺的部分,

它的作用是,将逻辑层进过业务逻辑得到的数据呈现到界面上。小程序中跟这个基本一样,那有何不同呢,一起来看看。

一、作用,数据绑定

小程序中规定数据必须要放在一个固定的地方,就是该页面逻辑层的 data 属性中。

页面的逻辑层就是该页面的 js 中,data:{   //该对象中的所有属性都可以在界面中访问到。   }

语法:mustache   小胡子语法   逻辑判断、三元表达式都可运算

1.小胡子语法   作用于元素的内容

逻辑层:

微信小程序(五)_数据绑定_第1张图片

界面:

微信小程序(五)_数据绑定_第2张图片

PS:在界面访问数据时,不用 data. 这种形势,只需访问data中的属性名。如上面,直接访问 message

小胡子语法,作用: 专门用于输出逻辑层暴露的数据

2.小胡子语法作用于,元素的属性上

微信小程序(五)_数据绑定_第3张图片

    mustache 之外还可以添加东西

    微信小程序(五)_数据绑定_第4张图片

3.简单的逻辑运算

微信小程序(五)_数据绑定_第5张图片

4.字符串拼接

微信小程序(五)_数据绑定_第6张图片

***小程序 wxml 中 属性的值 如果只是在双引号内部,就永远是字符串

1.只是字符串

微信小程序(五)_数据绑定_第7张图片

2.小胡子语法  mustache  {{}}   可以用于申明有类型的值

微信小程序(五)_数据绑定_第8张图片

3.checkbox 

默认选中属性为 false,可以通过点击选中和不选。

     =  选中

     =  选中

     =  选中   

            ps:虽然可以实现效果,但是要排除掉。因为小程序的 wxml 语法要遵循 html 语法,

                    html 规定,属性必须要有属性值,而且属性值要用双引号引起来。

                    因此,这个方法也兼容,但是并不推荐这么去做。

     =  选中     (随便写)

     =  选中     (为空)

                    发现:随便写checked='asdf',或者,checked=' ' 为空,也是可以被选中的。

               所以,在小程序 wxml 中 属性的值 如果只是在双引号内部,就永远是字符串。因此,要想有自己的类型,就要借助‘小胡子语法’。

例如:{{message + 2}}

           message 为该页面 js 中定义的数据。

           message是字符串时,上面的输出为 ‘拼接的字符串’

           message是数字1时,上面的输出结果为   ‘拼接的字符串’

    所以,mustache语法,用于申明有类型的值

 

 

二、作用,如何在界面调用,逻辑层暴露的函数

首先,看一下

js中暴露一个函数:

微信小程序(五)_数据绑定_第9张图片

界面:

微信小程序(五)_数据绑定_第10张图片

结论:没有任何效果显示在界面中。因此,data 中只能暴露数据成员。

那么,要怎么才能在界面调用逻辑层暴露的函数呢,小程序有一个 wxs

wxs 标签类似于,在 html 中的 script 标签,可以定义一些行内脚本。

微信小程序(五)_数据绑定_第11张图片

就有结果了!

 

 

 

 

 

 

你可能感兴趣的:(微信小程序)