将数据存放到viewdata_10. 零基础搭建小程序：模板语法—数据绑定（2）

图文版

大家好！

欢迎来到手把手教你零基础搭建小程序的课堂，本章继续讲解数据绑定的基本用法~~~

主要内容有以下两大块！

一、普通写法
（一）字符类型
（二）数字类型
（三）bool类型
（四）对象类型
二、组件属性

一、普通写法

（一）字符类型

1、打开demo03文件夹--demo03.js文件

为方便示范，将data值之外的函数均删除，只保留data部分，如下图所示：

2、我们要把在左侧界面中需显示的内容，放在data内部，代码如下：

msg:"hello,jack"

3、打开demo03.wxml文件，将变量msg写入view标签中，并保存。

代码如下：

<view>{{msg}}</view>

这里要记笔记的：

变量名一定要用双花括号或者单花括号渲染！！！

最后，界面是这样的：

我们在开始的时候，在demo03.js文件中的data部分定义了属性msg,

它的值是字符串“hello,jack”，

这也就是说，

我们可以用这样的方法，在标签文件(wxml)中，通过{{}}来渲染。

（二）数字类型

1、打开demo03文件夹--demo03.js文件，在data部分中，加入数字类型”num"，代码如下：

num:1000

2、打开demo03.wxml文件，将num写入view标签中，并保存。

代码如下：

<view>{{num}}</view>

最后，界面如下：

（三）bool类型

1、打开demo03文件夹--demo03.js文件，在data部分中，加入bool类型，并保存。

代码如下：

isGirl:false

这里探讨的是是不是伪娘的问题~~~哈哈~~来自对广大程序猿的灵魂拷问~~~

2、打开demo03.wxml文件，将类型写入view标签中，并保存。

代码如下：

<view>伪娘否：{{isGirl}}</view

结果显示的是：

伪娘否：false

那到底是不是伪娘呢？

（四）对象类型

我们要在也页面中插入一个对象，应该怎么进行数据绑定呢？

步骤与上面差不多，但还是有差别的！一定要仔细看！！

1、打开demo03文件夹--demo03.js文件，在data部分中，加入对对象的整体描述，并保存。

代码如下：

person:{
age:60,
height:160,
weight:160,
name:"富婆"
}

年龄：60岁；身高：160cm;体重：160斤；

此为”富婆“本婆了~

2、打开demo03.wxml文件，将对象类型写入view标签中，并保存。

最后，界面如下所示：

由上图可以看到，

我们把对象类型写入后，界面仅仅显示的是对象类型的类型而已。

所以，这样做是肯定不行的。

当你要渲染某个对象时，是需要在wxml中加入对象每个属性的。

具体操作如下：

3、打开demo03.wxml文件，写入以下代码，并保存。

<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>

界面如下图所示：

二、组件属性

demo03.js文件中，data部分中的数据不单单可以做成文本，也可当做组件属性来使用。

比如，拿刚操作的”num=1000“来说，

我们在demo03.jwxml文件中，

使用view标签，在其中加入num作为属性，代码如下：

<viewdata-num="{{num}}">自定义属性</view>

按下保存键后，界面如下所示：

这里，只能在页面上看到”自定义属性“，看不到真正的属性。

其实，它是隐藏起来了，

打开调试器--找到wxml菜单栏，就可以看到了。

补充tips:

bool类型做属性时的注意事项！！

在我们使用bool类型充当属性时，有一点是一定要规范的！！

我们用checkbox标签来举例。

checkbox标签，相当于web中的复选框标签。

具体操作是，

在demo03.jwxml文件中，使用view标签，在其中加入checkbox标签作为属性，保存。

代码如下：

<view><checkbox></checkbox></view>

一顿操作后，复选框出现了。

那接下来，我们要激活复选框，应该怎么修改呢？

在demo03.jwxml文件中，将checkbox标签进行修改，保存。

代码如下：

<view><checkboxchecked></checkbox></view>

观察前后两个代码块，可以发现，

我们在<checkbox>中加入”checked“即可。

也可以，这样修改，来激活复选框~~~

<view><checkboxchecked="{{true}}"></checkbox></view>

激活复选框实现了，那如果我们想让页面显示复选框未选中呢？

还可以怎么修改code?

步骤如下：

1、打开demo03文件夹--demo03.js文件，在data部分中，加入标签，并保存。

代码如下：

ischecked:false

2、打开demo03.wxml文件，将ischecked写入上面带有checked标签的view标签中，并保存。

代码如下：

<view><checkboxchecked="{{ischecked}}"></checkbox></view>

最后，界面如下所示，可以看到复选框又是呈现未选中的状态了~~~

那这里呢，再在wxml中做点手脚儿，以下代码：

<view><checkboxchecked="{{ischecked}}"></checkbox></view>

在字符串和花括号之间，加入空格，

<view><checkboxchecked="{{ischecked}}"></checkbox></view>

按下保存键，这里看看，会有什么改变？

上图可以看到，如果在字符串和花括号之间加入空格后，界面会发生变化，

复选框由未激活到激活状态！！

所以，

小本本认真记下来！！

再用bool类型充当属性时，

字符串和花括号之间一定不要有空格！！

否则会导致识别失败！！！

视频版

知乎视频​www.zhihu.com