小程序开发设计-模板与配置：WXML模板语法⑨
上一篇文章导航：
https://blog.csdn.net/qq_60872637/article/details/142455703?spm=1001.2014.3001.5501注：不同版本选项有所不同，并无大碍。
目录
1.数据绑定：
Ⅰ.数据绑定的基本原则：
①在data中定义数据
②在wxml中使用数据
Ⅱ.在data中定义页面的数据：
在页面对应的.js文件中，把数据定义到data对象中即可。
Ⅲ. Mustache语法的格式：
把data中的数据绑定到页面中渲染，使用Mustache语法(双大括号)将变量包起来即可。语法格式如下：
<span style="background-color:#dadada"><span style="color:#1f0909"><span style="color:#981a1a"><</span><span style="color:#000000">view</span><span style="color:#981a1a">></span>{{<span style="color:#000000">要绑定的数据名称</span>}}<span style="color:#981a1a"><</span><span style="color:#ff5500">/view></span></span></span>在index.js中声明数据，在index.wxml中使用。
// index.js
Page({
data: {
info:'hello world'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad:function(options){
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady:function(){
console.log('页面初次渲染完成');
}
})//index.wxml:
<!--index.wxml-->
<view>{{info}}</view>
Ⅳ.Mustache语法的应用场景：
·绑定内容
·绑定属性
·运算(三元运算、算术运算等)
Ⅴ.动态绑定内容：
在info定义了字符串的数据，需要显示地表示出来。就用<view></view>语法。
Ⅵ.动态绑定属性：
在data里面定义了img地址为imgSrc。将这个imgSrc动态地绑定到img组件的src属性上。
Ⅶ.三元运算：
注意.js文件中的名称与.wxml中的名称相匹配。
Ⅷ.算数运算：
生成100以内的随机数
2.事件绑定：
Ⅰ.什么是事件：
下篇导航：
本系列持续更新中...
原文地址：https://blog.csdn.net/qq_60872637/article/details/142965077
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！