sriting的博客

sriting的博客

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

文档:数据绑定 · 小程序
此贴为学习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
文章标签: 微信小程序
个人分类: web前端
上一篇node.js学习笔记--API之buffer
下一篇学习微信小程序WXML之列表渲染
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭