小程序开发设计-模板与配置：WXML模板语法⑨

上一篇文章导航：

小程序开发设计-协同工作和发布：协同工作⑧-CSDN博客https://blog.csdn.net/qq_60872637/article/details/142455703?spm=1001.2014.3001.5501

注：不同版本选项有所不同，并无大碍。

目录

上一篇文章导航：

注：不同版本选项有所不同，并无大碍。

1.数据绑定：

Ⅰ.数据绑定的基本原则：

Ⅱ.在data中定义页面的数据：

Ⅲ. Mustache语法的格式：

Ⅳ.Mustache语法的应用场景：

Ⅴ.动态绑定内容：

Ⅵ.动态绑定属性：

Ⅶ.三元运算：

Ⅷ.算数运算：

2.事件绑定：

Ⅰ.什么是事件：

下篇导航：

---

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.jsPage({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.事件绑定：

Ⅰ.什么是事件：

下篇导航：

本系列持续更新中...