小程序数据绑定代码例子3个
发布于2021-05-30 11:25 阅读(1246) 评论(0) 点赞(20) 收藏(4)
见电脑 基础知识点 文件夹
输出效果：
js 代码部分
// pages/test01/index.js
Page({
/**
* 页面的初始数据
*
*
* 保存后工具刷新，模拟器并没有显示出当前的时间，这是因为我们并没有给 time 设置任何初始值，请打开 pages/wxml/index.js 文件，在 data 的大括号中加入：time: (new Date()).toString()。
如代码2-6所示。
代码清单2-6 数据绑定示例
*/
data: {
// 数据绑定例子 1
time: (new Date()).toString(),
// 数据绑定2
motto: 'Hello World',
// 数据绑定3
motto1: '数据绑定例子3成功输出'
},
})
------------------------------------------
wxml代码
<!--pages/test01/index.wxml-->
<!--
用户界面呈现会因为当前时刻数据不同而有所不同，或者是因为用户的操作发生动态改变，这就要求程序的运行过程中，要有动态的去改变渲染界面的能力。在 Web 开发中，开发者使用 JavaScript 通过Dom 接口来完成界面的实时更新。在小程序中，使用 WXML 语言所提供的数据绑定功能，来完成此项功能。
先看一个简单的例子。
将 pages/wxml/index.wxml 文件的内容做一些简单的修改，如代码2-5所示。
代码清单2-5 数据绑定示例
-->
<!-- 官方例子1 -->
<text>当前时间：{{time}} </text>
<!-- 练习2 -->
<!-- <view>{{a}}</view> -->
<!-- <text data-text=""> </text> -->
<!-- hello world数据绑定的成功展示出来 -->
<text class="user-motto">{{motto}}</text>
<!-- 练习3 -->
<text class="user-motto">{{motto1}}</text>
-----------------------------------------------------
数据绑定
WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。
后文中为了保持简单，通过以下格式来展示上述的代码逻辑，使用第一段注释来表明 WXML 对应的脚本文件中的 data 结构。
代码清单2-7 展示格式
- <!--
- {
- time: (new Date()).toString()
- }
- -->
- <text>当前时间：{{time}}</text>
属性值也可以动态的去改变，有所不同的是，属性值必须被包裹在双引号中，如下：
代码清单2-8 属性值的绑定
- <!-- 正确的写法 -->
- <text data-test="{{test}}"> hello world</text>
-
-
- <!-- 错误的写法 -->
- <text data-test={{test}}> hello world </text >
所属网站分类: 技术文章 > 博客
作者：前端黄柠檬
链接：http://www.qianduanheidong.com/blog/article/115996/98f4b9dccfbbb06c71a0/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力