微信小程序 数据绑定及运算的简单实例


Posted in Javascript onSeptember 20, 2017

微信小程序 数据绑定的简单实例

简单用法:

Page({
 data: {
  message: '张三'
 }
})

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
   var content1={
     date: "2020年 10月 8日 ", 
     title:"时间群" ,
     nameData:{
       name1:"张三李四",
       name2:"人五人六",
     },
     fade:true/false 
   }
   this.setData(content);
 },

数据绑定使用 Mustache 语法(双大括号)将变量包起来获取

<view> {{ date}} </view>
<view> {{ title}} </view>
<view> {{ nameData.name1}} </view>
<view> {{ nameData.name2}} </view>//层级用点取值
<image wx:if="{{fade}}" class="image" src=""></image>//隐藏/显示

可以在 {{}} 内进行简单的运算

三元运算符

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

计算

Page({
 data: {
  a: 1,
  b: 2,
  c: 3
 }
})
<view> {{a + b}} + {{c}} + d </view>

输出结果:3 + 3 + d。

逻辑判断

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

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

Page({
 data: {
  zero: 0
 }
})
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

输出结果:组合成数组[0, 1, 2, 3, 4]。

对象

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

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

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery Ajax文件上传(php)
Jun 16 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
Angularjs使用过滤器完成排序功能
Sep 20 #Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 #Javascript
node+koa实现数据mock接口的方法
Sep 20 #Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 #Javascript
ES6中Array.includes()函数的用法
Sep 20 #Javascript
微信小程序视图template模板引用的实例详解
Sep 20 #Javascript
highcharts 在angular中的使用示例代码
Sep 20 #Javascript
You might like
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
Python使用gensim计算文档相似性
2016/04/10 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
经贸韩语专业大学生职业规划
2014/02/14 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
小学四年级作文之写景
2019/08/23 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL