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


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的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
垃圾回收器的相关知识点总结
May 13 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
详解javascript函数写法大全
Mar 25 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实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
详解如何让Express支持async/await
2017/10/09 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
vue实现员工信息录入功能
2020/06/11 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
python uuid模块使用实例
2015/04/08 Python
python访问类中docstring注释的实现方法
2015/05/04 Python
Python实现批量下载文件
2015/05/17 Python
Python 数据结构之旋转链表
2017/02/25 Python
django model object序列化实例
2020/03/13 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
英文简历中的自荐信范文
2013/12/14 职场文书
公司年会策划方案
2014/05/17 职场文书
民间个人借款协议书
2014/09/30 职场文书
销售经理工作检讨书
2015/02/19 职场文书
英语演讲开场白
2015/05/29 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
Python机器学习之逻辑回归
2021/05/11 Python
python turtle绘图
2022/05/04 Python