学习微信小程序WXML之数据绑定

原创 2018年04月16日 15:11:16

文档:数据绑定 · 小程序
此贴为学习9 小时搞定微信小程序开发 的笔记

数据绑定使用两个花括号。

  1. 绑定文本内容
<!--index.wxml-->
<view>
    <text>{{message}}</text>
</view>
//index.js
Page({
    data:{
        message:"Hello,world"
    }
})

1
2. 绑定属性

<!-- index.wxml -->
<view>
    <text data-name="{{theName}}">
    </text>
</view>

data-name为自定义属性,当组件上触发的事件时,会把data-*属性发送给事件处理函数。所以可以把页面上的数据通过data属性传给逻辑层。

//index.js
Page({
    data: {
        theName:"Jack"
    }
})

2

3.运算符绑定

<!-- index.wxml -->
<view hidden="{{flag ? true : false}}">
    Hidden
</view>

view标签的hidden属性可以设置显示或隐藏view标签的内容。

//index.js
Page({
    data:{
        flag: false
    }
})

传入flag变量为false,hidden属性为false,显示标签内容;如果flag变量为true,则显示view标签内容。
3

还有其他绑定方式,请看小程序框架文档:数据绑定 · 小程序

标签属性

所有组件都有的共同属性:
这里写图片描述
详见:组件 · 小程序
bind、catch可以绑定组件的事件,通过绑定事件的回调函数来进行一些操作。详见:事件 · 小程序

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sriting/article/details/79960925

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

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

小程序WXML之数据绑定

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

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

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

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

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

小程序实战教程(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
  • 4251

1.3.1微信小程序 WXML

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

微信小程序--在wxml中设置保留小数位数

需求 在wxml中计算价格*数量小数出现问题。需要新建一个wxs文件var filters = { toFix: function (value) { return value.to...
  • xbw12138
  • xbw12138
  • 2018-01-04 01:19:31
  • 1887

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

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

微信小程序开发常见问题

1.新建页面编译错误,提示无法找到对应wxml文件? ---------新建时会在配置文件自动生成,但是通常会在最前面加“/”,把“/”去除就可,这算是工具bug吗。 2.tabbar底部...
  • u010753376
  • u010753376
  • 2017-06-04 14:42:08
  • 712

微信小程序 Html转Json转Wxml

wxml js var WxParse = require('../../utils/wxPars
  • xiaochun365
  • xiaochun365
  • 2017-05-02 12:31:44
  • 794
收藏助手
不良信息举报
您举报文章:学习微信小程序WXML之数据绑定
举报原因:
原因补充:

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