单价:500
数量:2
合集:0
功能实现所涉及到的代码模板,代码模板的使用请查看这里
使用位置: 元素右键-->逻辑-->额外逻辑编程
作用: 用于给某元素在某条件下添加逻辑行为。
内容:
var varall = _vm["复合信息名称"]();
var varname = "绑定变量名称";
var arrname = "数组变量名称";
if (!varall) {
for (var i = 0; i < _vm[arrname]().length; i++) {
_vm[arrname]()[i][varname]("绑定变量值");
}
} else {
for (var i = 0; i < _vm[arrname]().length; i++) {
_vm[arrname]()[i][varname]("绑定变量值");
}
}
使用位置: 页面编辑-->编辑-->逻辑文件-->复合信息
作用: 用于定义通过计算得出的数据。
内容:
"复合信息名称": function() {
var _vm = this;
var result; //最终的返回数据,需要定义初始值。例如数据返回的是真假,可以写为:var result = true;
var varname1 = "绑定变量名称";
var varname2 = "绑定变量名称";
var varname3 = "绑定变量名称";
var arrname = "数组变量名称";
for (var i = 0; i < _vm[arrname]().length; i++) {
if (_vm[arrname]()[i][varname1]()) {
result += _vm[arrname]()[i][varname2]() * _vm[arrname]()[i][varname3]();
}
}
return result;
}, //一个复合信息点结束
上面的效果演示的实现使用了两个案例内容,一个是多选框全选,一个是价格合计。
1. 制作购物车中的一个商品(包括左侧勾选框及价格,数量。)
1.1 左侧勾选框
文档流布局中添加一个“复选框”,内容不用管,确定添加。
右键单击复选框(图1),逻辑→逻辑,设置`单击元素发生的事件`(图2),请注意,要将逻辑绑定在input标签上而不是label标签上。
图1:
图2:
发生的事件,通过`绑定数据编程`实现。绑定数据编程的代码模板可点击这里查看
完成后保存,添加绑定。
逻辑→数据绑定: 绑定模式:多选框勾选状态绑定,绑定参数:checkall
1.2 商品价格
回车下一行,录入"单价:xxx",右键单击xxx>>逻辑>>数据绑定。文本内容绑定,绑定参数:danjia
回车下一行,录入"数量:2",右键单击2>>逻辑>>数据绑定。文本内容绑定,绑定参数:shuliang
1.3 为商品绑定初始化数据
回车下一行,打开元素模式。添加一个div。
右键单击添加的div(这个div是包在商品外面的)。逻辑→数据绑定。设置参数如下。
高级编辑:
内容如下:
{"arr":[{"check":true,"danjia":100,"shuliang":2},{"check":true,"danjia":200,"shuliang":2},{"check":true,"danjia":100,"shuliang":3},{"check":true,"danjia":500,"shuliang":1}]}
2. 制作全选按钮
在刚才我们新建的div中添加一个复选框,参数不用管,确定添加。右键单击复选框。逻辑→数据绑定(在input上添加),设置参数如下:
3.价格合计
回车下一行,录入"总价:xxx",右键单击xxx>>逻辑>>数据绑定。文本内容绑定,绑定参数:total
4. 设置 批量逻辑编辑添加复合数据定义
设置完后保存。找到编辑>>逻辑文件
设置复合信息。复合信息的代码模板可点击这里查看
在这里添加注意事项描述