3. 编辑元素
数据绑定是通过获取页面数据,并以一定的绑定模式,将数据绑定至元素,以达到特定的效果。
数据绑定的实质:数据通过逻辑驱动元素发生变化,这个逻辑就是数据绑定。
获取数据的方法:通过后端接口获取或绑定变量初始化。
注:使用数据绑定的页面在打开页面显示数据时,会有一个可见的延迟。
右键点击元素→逻辑→数据绑定。
(1)数据绑定区:选择元素并设置绑定模式和绑定参数。
绑定模式:设置数据绑定的绑定模式,控制绑定的效果。
绑定参数:对应绑定模式的参数设置,绑定参数就是一个变量的名称,变量命名只能是字母、数字、并需要全小写。只要符合命名规范,变量可以取任意命名。
设置绑定模式和绑定参数后,点击增加绑定,才会为元素添加数据绑定。
(2)初始化变量区:提供初始化数据。
绑定变量初始化:给页面提供初始数据。初始化全局变量中的任意变量,与上面使用的任意全局变量完全无关。变量全局有效,因此变量只需要在任意一个地方初始化即可。绑定变量动态化时,要求整体动态化。点击查看绑定变量初始化中高级编辑操作详情。
绑定模式 | 功能 | 适用场景 | 适用元素 | 绑定参数 |
---|---|---|---|---|
可见性绑定 | 将是否可见的数据绑定至元素 | 需要显示或不显示的元素 | 所有元素 | 变量名 |
文本内容绑定 | 将文本内容的数据绑定至元素 | 用户名、商品名、商品价格等 | 可含有文本内容的元素 | 变量名 |
html内容绑定 | 将html内容的数据绑定至元素 | 链接 | 可含有html内容的元素 | 变量名 |
css类绑定 | 将css类的数据绑定至元素 | 改变css类 | 所有元素 | 变量名 |
css样式绑定 | 将css样式的数据绑定至元素 | 改变css样式 | 所有元素 | {"css样式名":变量名} |
属性绑定 | 将属性的数据绑定至元素 | 设置元素属性 | 所有元素 | {"属性名":变量名} |
数组绑定 | 将数组的数据绑定至元素 | 需要循环、重复的内容,如列表、商品目录 | 可以写入子元素的所有元素 | 变量名 |
条件判断绑定 | 如果真,则发生某事件 | 判断条件 | 所有元素 | 变量名 |
否定条件判断绑定 | 如果假,则发生某事件 | 判断条件 | 所有元素 | 变量名 |
就地编辑绑定 | 可以在页面修改被绑定元素显示的内容 | 修改元素显示内容 | 所有元素 | 变量名 |
就地编辑属性 | 功能开发中 | 所有元素 | 变量名 | |
表单元素启用绑定状态 | 控制表单元素是否可用 | 按钮是否启用 | 表单元素 | 变量名 |
表单元素禁用绑定状态 | 控制表单元素是否禁用 | 按钮是否禁用 | 表单元素 | 变量名 |
表单元素值绑定 | 给表单添加初始值 | 脱离输入后改变元素值,下拉菜单中设置表单元素值 | 表单元素 | 变量名 |
文本输入值绑定 | 文本框的值绑定和修改 | 即时修改元素文本内容 | 单行文本、多行文本 | 变量名 |
多选框勾选状态绑定 | 确定多选框选项是否选中 | 多选框的选中状态 | 多选框元素 | 变量名 |
数组绑定多选框选项名 | 将多选框选项名绑定为数组内容 | 下来菜单的联动 | 多选框元素 | "变量名" |
数组绑定多选框选项值 | 将多选框选项值绑定为数组内容 | 下来菜单的联动 | 多选框元素 | "变量名" |
数组绑定多选框选项 | 将多选框选项绑定为数组内容 | 下来菜单的联动 | 多选框元素 | 变量名 |
数组绑定多选框选中选项 | 设置默认选中项 | 下来菜单的联动 | 多选框元素 | 变量名 |
确保唯一name | 所有元素 | 变量名 |