前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >「小程序JAVA实战」小程序视图之细说数据绑定(13)

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

作者头像
IT架构圈
发布2018-12-21 10:50:11
7310
发布2018-12-21 10:50:11
举报
文章被收录于专栏:IT架构圈

在前面的小节里面其实对数据绑定都有所了解了,在这次给老铁在好好说下数据绑定,看下它的方方面面是如何实现的。源码: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

代码语言:javascript
复制
<!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

代码语言:javascript
复制
//dataBind.js
//获取应用实例
const app = getApp()

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

})
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-12-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 编程坑太多 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 小程序的数据绑定
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档