专栏首页编程坑太多「小程序JAVA实战」小程序视图之细说数据绑定(13)

「小程序JAVA实战」小程序视图之细说数据绑定(13)

在前面的小节里面其实对数据绑定都有所了解了,在这次给老铁在好好说下数据绑定,看下它的方方面面是如何实现的。源码:https://github.com/limingios/wxProgram.git 中的No.8

小程序的数据绑定

  1. JQuery dom 操作 $选择器
  2. 微信小程序是通过数据绑定 vue/react
  3. .js 中通过data 对象与.wxml的元素绑定{{data}} ->Mustache 表达式语法

Mustache 是一款经典的前端模板引擎,在前后端分离的技术架构下面,前端模板引擎是一种可以被考虑的技术选型,随着重型框架(AngularJS、ReactJS、Vue)的流行,前端的模板技术已经成为了某种形式上的标配,Mustache 的价值在于其稳定和经典: 主页:https://github.com/janl/mustache.js/文档:https://mustache.github.io/mustache.5.htmlMustache 在使用的时候,会在页面上出现 {{person}} 这样的标签,载入的时候回显示出来,然后立即被替换掉,这个对于页面的呈现是不够友好的,这是我在使用的过程中遇到的一个痛点。

  1. 官方的阐述

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html

  1. 演示绑定

  • 数据绑定使用 Mustache 语法(双大括号)将变量包起来
  • 关键字(需要在双引号之内) true:boolean 类型的 true,代表真值。 false: boolean 类型的 false,代表假值。
  • 可以在 {{}} 内进行简单的运算,支持的有如下几种方式: 三元运算 算数运算 逻辑判断 字符串运算

dataBind.wxml

<!dataBind.wxml-->
<view class="container" id='item={{id}}'>
{{msg}}
<!-- 控制属性(需要在双引号之内) 关键字(需要在双引号之内)-->
<checkbox checked="{{false}}"> </checkbox>
<checkbox checked="{{true}}"> </checkbox>
<checkbox checked="{{flag}}"> </checkbox>
<checkbox checked="{{unflag}}"> </checkbox>
<!-- 三目运算符-->
{{a+b==5?"是5":"不是5"}}
<!--算数运算-->
<view> {{a + b}} + {{c}} </view>
<!---字符串运算-->
<view> {{msg + hello + "test"}} </view>
<!---数字和字符串拼接-->
<view> {{a + b + "test"}} </view>
</view>

dataBind.js

//dataBind.js
//获取应用实例
const app = getApp()

Page({
  data: {
    msg: "这是一个msg",
    id: 1001,
    flag: true,
    unflag: false,
    a: 1,
    b: 4,
    c: 5,
    hello: "hello"
  }

})

本文分享自微信公众号 - 编程坑太多(idig88)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 「小程序JAVA实战」小程序模块页面引用(18)

    1.js代码块可以在页面中被引入使用 2.定义*.wxs,module.exports暴露接口和属性

    IT故事会
  • 『中级篇』如何在mac上安装docker(五)

    IT故事会
  • 写博客对程序员很重要吗?

    IT故事会
  • 这些不常用的Web API真的有用吗? 别问,问就是有用🈶

    本文列举了一些列比较不常见的Web API,内容较多,所以有关兼容性的内容在本文不会出现,大家可以自己去查阅。 以下案例能配动图的我尽量去配了,以免内容枯草乏味...

    聪明的汤姆
  • 第148天:js+rem动态计算font-size的大小,适配各种手机设备

    布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size。

    半指温柔乐
  • C# 解析 sln 文件 使用

    我的项目,编码工具 需要检测打开一个工程,获取所有项目。 但是发现原来的方法,如果存在文件夹,把项目放在文件夹中,那么是无法获得项目,于是我就找了一个方法去获得...

    林德熙
  • 基于大数据的政府环境应用和决策能力建设

    【摘要】大数据时代来临,大数据成为全球环境治理的战略资源和政府环境治理能力提升的新途径。当前我国环境决策面临着生态环境数据缺失、造假、“部门私有化”、开发乏力、...

    挖掘大数据
  • NYOJ 21 三个水杯(bfs模拟)

           这道题是一道bfs的题,主要是怎样把倒水的过程模拟出来,一共三个杯子,六种情况(A->B,A->C,B->A,B->C,C->A,C->B),所以...

    Ch_Zaqdt
  • iOS面试题:NSCache,NSDictionary,NSArray的区别

    在数组的开头和结尾插入/删除元素通常是一个O(1)操作,而随机的插入/删除通常是 O(N)的。

    猿_人类
  • CMU 神经网络 NLP 更新 | 第四讲:针对文本的卷积神经网络

    AI 研习社获得官方授权,汉化翻译卡耐基梅隆大学的11-747神经网络自然语言处理(2019春季),今天上线第四讲!

    AI研习社

扫码关注云+社区

领取腾讯云代金券