Article directory
提示:以下是本篇文章正文内容,下面案例可供参考
data binding
1. Basic principles of data binding
① 在data中定义数据
② 在WXML中使用数据
2. Define the data of the page in data
In the .js file corresponding to the page, define the data into the data object:
data: {
//字符串类型的数据
info:'init data',
//数组类型的数据
msgList:[{
msg:'Hello'},{
msg:'World'}]
}
3. Format of Mustache grammar
Bind the data in data to the page for rendering, and use Mustache syntax (double braces) to wrap variables.
<view>{
{
要绑定的数据名称}}</view>
For example:
4. Application Scenarios of Mustache Grammar
① 绑定内容
② 绑定属性
③ 运算(三元运算、算数运算等)
5. Dynamic binding properties
imageSrc:'https://ts1.cn.mm.bing.net/th/id/R-C.8cecc7ac37c9edc994de1d8e63bf0fd7?rik=x2d%2bFpTxdVRtQg&riu=http%3a%2f%2fp19.qhimg.com%2fbdm%2f1366_768_85%2ft019e03096b1178357a.jpg&ehk=nflbBHnafvE13EBX2BkwvXcDQ3AHrZxI4wDlI7WArRQ%3d&risl=&pid=ImgRaw&r=0'
<image src="{
{imageSrc}}"></image>
6. Ternary operation
randomNum1:Math.random()*10
<view>{
{
randomNum1 >=5 ? '数字大于或等于5' : '数字小于5'}}</view>
7. Arithmetic operations
randomNum2:Math.random().toFixed(2)
<view>{
{
randomNum2 * 100}}</view>
Summarize
Here I learned the grammar format and application scenarios of Mustache grammar, and also learned how to bind data. If you have any questions above, please correct me, thank you.