微信小程序 教程之数据绑定


Posted in Javascript onOctober 18, 2016

系列文章:

数据绑定

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

简单绑定

数据绑定使用"Mustache"语法(双大括号)将变量包起来,可以作用于:

内容

<view> {{ message }} </view>

Page({
 data: {
 message: 'Hello MINA!'
 }
})

组件属性(需要在双引号之内)

<view id="item-{{id}}"> </view>

Page({
 data: {
 id: 0
 }
})

控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> </view>

Page({
 data: {
 condition: true
 }
})

运算

可以在{{}}内进行简单的运算,支持的有如下几种方式:

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
 data: {
 a: 1,
 b: 2,
 c: 3
 }
})

view中的内容为3 + 3 + d

逻辑判断

<view wx:if="{{length > 5}}"> </view>

字符串运算

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

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

组合

也可以在Mustache内直接进行组合,构成新的对象或者数组

数组

<view wx:for-items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

Page({
 data: {
 zero: 0
 }
})

最终组合成数组[0, 1, 2, 3, 4]

对象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
 data: {
 a: 1,
 b: 2
 }
})

最终组合成的对象是{for: 1, bar: 2}

也可以用扩展运算符...来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
 data: {
 obj1: {
  a: 1,
  b: 2
 },
 obj2: {
  c: 3,
  d: 4
 }
 }
})

最终组合成的对象是{a: 1, b: 2, c: 3, d: 4, e: 5}

如果对象的key和value相同,也可以间接地表达

<template is="objectCombine" data="{{foo, bar}}"></template>

Page({
 data: {
 foo: 'my-foo',
 bar: 'my-bar'
 }
})

最终组合成的对象是{foo: 'my-foo', bar:'my-bar'}

注意:上述方式可以随意组合,但是如有存在变量名相同的情况,后边的会覆盖前面,如

<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>

Page({
 data: {
 obj1: {
  a: 1,
  b: 2
 },
 obj2: {
  b: 3,
  c: 4
 },
 a: 5
 }
})

最终组合成的对象是{a: 5, b: 3, c: 6}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
layui分页效果实现代码
May 19 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
JavaScript原生数组函数实例汇总
Oct 14 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 #Javascript
微信小程序 教程之WXML
Oct 18 #Javascript
原生JS实现匀速图片轮播动画
Oct 18 #Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 #Javascript
原生js实现网易轮播图效果
Apr 10 #Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 #Javascript
JSON对象 详解及实例代码
Oct 18 #Javascript
You might like
php垃圾代码优化操作代码
2010/08/05 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
为数据添加append,remove功能
2006/10/03 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
Python判断操作系统类型代码分享
2014/11/22 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
Servlet如何得到客户端机器的信息
2014/10/17 面试题
应届大学生求职的自我评价
2013/11/17 职场文书
教师暑期培训感言
2014/08/15 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
小学生毕业评语
2014/12/26 职场文书
2015年导购员工作总结
2015/04/25 职场文书
2015年财政局工作总结
2015/05/21 职场文书
开学典礼致辞
2015/07/29 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python