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


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 相关文章推荐
中止javascript执行的方法
Feb 14 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
Nuxt.js实战和配置详解
Aug 05 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中实现Javascript的escape()函数代码
2010/08/08 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
基于jquery的表格排序
2010/09/11 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
python实现多进程通信实例分析
2019/09/01 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
Keras搭建自编码器操作
2020/07/03 Python
澳大利亚百货公司:David Jones
2018/02/08 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
医院实习接收函
2014/01/12 职场文书
给儿子的表扬信
2014/01/15 职场文书
现金出纳岗位职责
2014/03/15 职场文书
英语复习计划
2015/01/19 职场文书
党支部鉴定意见
2015/06/02 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书