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


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 操作DOM的基本用法分享
Apr 05 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 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常用Output和ptions/Info函数集介绍
2013/06/19 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
PHP7匿名类用法分析
2016/09/26 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
微信小程序异步处理详解
2017/11/10 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
PyQt5每天必学之布局管理
2018/04/19 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
八年级美术教学反思
2014/02/02 职场文书
《和我们一样享受春天》教学反思
2014/02/07 职场文书
淘宝好评语大全
2014/05/05 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
MySQL的存储过程和相关函数
2022/04/26 MySQL