WXML模板中的数据绑定

一、WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。

记一个简单的例子
将 pages/wxml/index.wxml 文件的内容做一些简单的修改

<!--pages/wxml/index.wxml-->
<text>当前时间:{{time}}</text>

保存后工具刷新,模拟器并没有显示出当前的时间,这是因为我们并没有给 time 设置任何初始值.
打开 pages/wxml/index.js 文件,在 data 的大括号中加入:

time:(new Date()).toString()     //js 中的 time 与 wxml 中的 time 绑定

保存,模拟器刷新后正确的展示了当前时间,并且每次编译时间都会被更新。


二、属性值也可以动态的去改变,有所不同的是,属性值必须被包裹在双引号中
<!-- 正确的写法 -->
<text data-test="{{test}}"> hello world</text>


<!-- 错误的写法  -->
<text data-test={{test}}> hello world </text >

三、绑定的变量名大小写敏感
四、没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中
发布了145 篇原创文章 · 获赞 34 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_43207025/article/details/104072410