1. Basic principles of data binding
① Define data in data
② Using data in WXML,
In the .js file corresponding to the page. Just define the data in the data object
In the WXML file, use { {}} two curly braces plus variable name to call
The above usage method, let's do it in practice
The main usage scenarios of Mustache syntax are as follows:
text content binding
Component property binding
Operations (ternary operations, arithmetic operations)
2. Mustache syntax use case 1 (use of text variables)
We only need to add data in these two files
The first step is now to add two sets of data to the data in the pages in the .js file
A string type of data
an array of data
data: {
//字符串类型的数据
info:'你好北葵',
//数组类型的数据
msgList:[{msg:'微信'},{msg:'zei985'}]
},We have stored the data we need to use in js, now we will enter the WXML file to use it
We found that using two curly braces can call the data and print it on the screen, so we remember a feature that is
The data stored in Mustache syntax is used under the data in the .JS file and is called by using two curly braces in the WXML file
At this time, someone will ask the teacher, I not only need variables for the text text, but if I add a picture at this time, the picture is a URL link, how can I change it at any time?
3. Mustache syntax use case 2 (image link url variable use)
As shown in the above picture, let's first look at the original format of the image component.
<image src="https://img-home.csdnimg.cn/images/20201124032511.png" mode="widthFix"/>
We can see that src is a url link, so let's try to put the link under data
data: {
//url链接
url:'https://img-home.csdnimg.cn/images/20201124032511.png'
},We try to use him, use 2 curly braces in the WXML file to call
We can see that Mustache syntax can be used not only in attributes, but also in text.
4. Mustache syntax use case 3 (arithmetic operation)
We first try to perform arithmetic operations in the .JS file and then output it to the WXML file for display
.js
data: {
text:Math.random() * 10
//Math.random() 是生产一个随机0到1小数，我们将他乘10相当于生产一个十以内的随机数
},.wxml
<view>
{ { text } }
</view>
We can see that he can perform calculations in js and then output the corresponding parameters to the text variable, and then display them in the interface through Mustache syntax
5. Mustache grammar use case 4 (ternary operation)
We continue to edit according to the above code, try to do ternary operation in Mustache syntax in WXML file
<view>
{
{ text > 5 ? '随机数字大于5' : '随机数字小于5'}}
</view>
We found that ternary operations can be used in Mustache grammar, which greatly facilitates the use of some judgment conditions.
This is the end of the data binding of WeChat here, and the use of Mustache syntax is over. There are more interesting things that need everyone to expand! If you feel good, leave a message. Your message is my motivation.