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


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 相关文章推荐
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 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设计模式  Command(命令模式)
2011/06/17 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
JQuery验证工具类搜集整理
2013/01/16 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
强悍的Python读取大文件的解决方案
2019/02/16 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
Python中函数的返回值示例浅析
2019/08/28 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
房屋委托书范本
2014/04/04 职场文书
入股协议书
2014/04/14 职场文书
创业培训计划书
2014/05/03 职场文书
湘江北去观后感
2015/06/15 职场文书
实习感想范文
2015/08/10 职场文书