微信小程序学习日志:wxml框架特性之数据绑定简述

原创 2018年04月16日 12:48:59

  小程序中的数据绑定有点类似于C的宏定义或者是变量赋值,就是把一个数据赋给另外一段字符串,接下来是简单的数据绑定。

   所有的数据绑定要在页面js文件中用data函数完成,在wxml中使用绑定的数据要加上双大括号“{{}}”

   我的页面名称是helloworld。现在在helloworld.js文件中完成数据绑定,message所绑定的数据是“小帅哥快来玩呀”这个句子


接着到wxml中去引用,在view标签中输入message,不要漏了两个大括号。

然后编译,就可以看到了“小帅哥快来玩呀”这段文本了

数据绑定之后,引用数据时可以在双大括号内进行简单的计算

比如,将上例中的“小哥哥快来玩呀”改成整数“1”,引用时将message进行加法操作



这个时候模拟器界面会出现一个2。哦耶~


再来一个简单的例子,三元运算,利用wxml中标签的hidden属性。

先在js文件中用message绑定false这个boolean值


然后在wxml文件中引用时在view标签属性中用一个判断语句

hidden='{{message?false:true}}'


编译后模拟器出现如下界面,即验证成功



最后说一下,数据绑定还有其他更详细的用法,可以自行百度一下;上面是一些简单用法,用来初步了解。

微信小程序框架wxml(一)wxml数据绑定

今天系统的记录一下wxml的数据绑定功能。 首先给出wxss样式文件 /* pages/wxml/wxml.wxss */ .wxml-container{ padding: 0 20rpx ; ...
  • Crab0314
  • Crab0314
  • 2017-10-17 16:50:03
  • 491

小程序WXML之数据绑定

WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件,事件系统,可以构建出页面的结构。简单的说就是微信团队自己设计出来一种xml标签语言,在小程序中扩展名...
  • zsx_xiaoxin
  • zsx_xiaoxin
  • 2016-10-13 11:16:41
  • 3948

微信小程序WXML 数据绑定、列表渲染、条件渲染、模板、事件、引用用法

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 数据绑定 {{message}} // page.js Page(...
  • timtian008
  • timtian008
  • 2017-01-17 15:25:00
  • 2509

微信小程序的学习(3)-视图层WXML

框架的视图层由WXML与WXSS编写。 其中WXML(WeiXin Markup language)用来描述页面的结构,其实就是页面中的组件的结构,其文件是.wxml;WXSS(WeiXin Sty...
  • Garment1991
  • Garment1991
  • 2016-12-18 16:12:09
  • 3019

微信小程序框架wxml(五)wxml事件

1.事件定义 · 事件是视图层到逻辑层的通讯方式。 · 事件可以将用户的行为反馈到逻辑层进行处理。 · 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 · 事件对象...
  • Crab0314
  • Crab0314
  • 2017-10-21 09:54:52
  • 654

小程序实战教程(5)—视图层WXML绑定数据、模板、逻辑

源码下载(XiaoDemo-V1.0) 链接:http://pan.baidu.com/s/1i5sLYw1  密码:pzqr 前篇文章介绍了小程序的MVC结构: page.js 即控制层(C),...
  • quasimodo_es
  • quasimodo_es
  • 2016-11-20 20:43:17
  • 4271

1.3.1微信小程序 WXML

视图层 MINA的视图层由WXML与WXSS编写。 将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。 WXML(WeiXin Markup language)用于描述页面的结构。 W...
  • iamsellen
  • iamsellen
  • 2017-04-22 10:56:48
  • 851

微信小程序框架wxml(六)wxml引用

wxml提供两种引用方式,import和include 1.import和include的区别 (1)import 可以在文件中使用被import文件中定义的template;include可以在...
  • Crab0314
  • Crab0314
  • 2017-10-21 16:54:40
  • 132

微信小程序-wxml和wxss样式

wxml wxss
  • QEcode
  • QEcode
  • 2017-10-08 20:36:52
  • 430
收藏助手
不良信息举报
您举报文章:微信小程序学习日志:wxml框架特性之数据绑定简述
举报原因:
原因补充:

(最多只允许输入30个字)