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


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操作radio的简单实例
Jan 06 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
ztree实现权限横向显示功能
May 20 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 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制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
php文件上传类完整实例
2016/05/14 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
详解python单元测试框架unittest
2018/07/02 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
2014年计算机专业个人自我评价
2014/01/19 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
大学入学感言
2015/08/01 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP