java 数据捆绑,「小程序JAVA实战」小程序视图之细说数据绑定（13）

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

小程序的数据绑定JQuery dom 操作 $选择器

微信小程序是通过数据绑定 vue/react

.js 中通过data 对象与.wxml的元素绑定{{data}} ->Mustache 表达式语法Mustache 是一款经典的前端模板引擎，在前后端分离的技术架构下面，前端模板引擎是一种可以被考虑的技术选型，随着重型框架(AngularJS、ReactJS、Vue)的流行，前端的模板技术已经成为了某种形式上的标配，Mustache 的价值在于其稳定和经典：

主页：https://github.com/janl/mustache.js/

文档：https://mustache.github.io/mustache.5.html

Mustache 在使用的时候，会在页面上出现 {{person}} 这样的标签，载入的时候回显示出来，然后立即被替换掉，这个对于页面的呈现是不够友好的，这是我在使用的过程中遇到的一个痛点。

官方的阐述https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html

演示绑定

>* 数据绑定使用 Mustache 语法(双大括号)将变量包起来

>* 关键字(需要在双引号之内)

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

>* 可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

三元运算

算数运算

逻辑判断

字符串运算

dataBind.wxml

{{msg}}

{{a+b==5?"是5":"不是5"}}

 {{a + b}} + {{c}} 

 {{msg + hello + "test"}} 

 {{a + b + "test"}} 

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"

}

})