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


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 相关文章推荐
JS实现图片预加载无需等待
Dec 21 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
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 配置文件中open_basedir选项作用
2009/07/19 PHP
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
树结构之JavaScript
2017/01/24 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
python 把数据 json格式输出的实例代码
2016/10/31 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
python plotly绘制直方图实例详解
2019/07/22 Python
Python字符串格式化输出代码实例
2019/11/22 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
毕业生怎样写好自荐信
2013/11/11 职场文书
初婚未育证明
2014/01/15 职场文书
环保倡议书
2014/04/14 职场文书
迎国庆横幅标语
2014/10/08 职场文书
单位委托书
2014/10/15 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python