Enlace de datos del programa WeChat Mini (13 de marzo de 2023)

提示:以下是本篇文章正文内容,下面案例可供参考

el enlace de datos

1. Principios básicos del enlace de datos

① 在data中定义数据    
② 在WXML中使用数据

2. Definir los datos de la página en data

En el archivo .js correspondiente a la página, defina los datos en el objeto de datos:

data: {
    
    
    //字符串类型的数据
    info:'init data',
    //数组类型的数据
    msgList:[{
    
    msg:'Hello'},{
    
    msg:'World'}]
  }

3. Formato de la gramática del bigote

Vincule los datos en data a la página para renderizar y use la sintaxis de Mustache (llaves dobles) para ajustar las variables.

<view>{
    
    {
    
    要绑定的数据名称}}</view>

Por ejemplo:
inserte la descripción de la imagen aquí

inserte la descripción de la imagen aquí

4. Escenarios de aplicación de la gramática del bigote

① 绑定内容    
② 绑定属性
③ 运算(三元运算、算数运算等)

5. Propiedades de enlace dinámico

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>

inserte la descripción de la imagen aquí

6. Operación ternaria

randomNum1:Math.random()*10
<view>{
    
    {
    
    randomNum1 >=5 ? '数字大于或等于5' : '数字小于5'}}</view>

inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí

7. Operaciones aritméticas

randomNum2:Math.random().toFixed(2)
<view>{
    
    {
    
    randomNum2 * 100}}</view>

inserte la descripción de la imagen aquí

Resumir

Aquí aprendí el formato de gramática y los escenarios de aplicación de la gramática de Moustache, y también aprendí a enlazar datos. Si tiene alguna pregunta anterior, corríjame, gracias.

Supongo que te gusta

Origin blog.csdn.net/qq_52992084/article/details/129502843
Recomendado
Clasificación