Liaison de données pour le développement de petits programmes-Développement de mini-programmes-php.cn

Liaison de données pour le développement de petits programmes

Y2J

Libérer： 2017-05-18 13:47:50

original

1994 Les gens l'ont consulté

Liaison de données

Les données dynamiques en WXML proviennent des données de la Page correspondante.

Liaison simple

La liaison de données utilise la syntaxe "Moustache" (doubles accolades) pour envelopper les variables et peut être utilisée sur :

Contenu

<view> {{ message }} </view>
Page({
  data: {
    message: &#39;Hello MINA!&#39;
  }
})

Copier après la connexion

ComposantAttributs(doivent être entre guillemets)

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

Copier après la connexion

Attributs de contrôle (doivent être entre guillemets)

<view wx:
if
="{{condition}}"> </view>
Page({
  data: {
    condition: true
  }
})

Copier après la connexion

Mot clé (doit être entre guillemets doubles)

true : vrai de type booléen, représentant la vraie valeur.

false : false de type booléen, représentant une valeur fausse.

<checkbox checked="{{false}}"> </checkbox>

Copier après la connexion

Remarque spéciale : n'écrivez pas directement check="false" Le résultat du calcul est une chaîne, qui est convertie en un type booléen pour représenter une valeur vraie.

Opération

peut effectuer des opérations simples dans {{}}. Les méthodes suivantes sont prises en charge :

Opération ternaire

<view hidden="{{flag ? true : false}}"> Hidden </view>

Copier après la connexion

<. 🎜>Opérations arithmétiques

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

Copier après la connexion

Le contenu en vue est

3 + 3 + d

Jugement logique

<view wx:if="{{length > 5}}"> </view>

Copier après la connexion

Opérations sur les chaînes

<view>{{"hello" + name}}</view>
Page({
  data:{
    name:"MINA"
  }
})

Copier après la connexion

Opérations sur le chemin des données

<view>{{
object
.
key
}} {{
array
[0]}}</view>
Page({  data: {
    object: {
      key: &#39;Hello &#39;
    },    array: [&#39;MINA&#39;]
  }
})

Copier après la connexion

Combinaison

peut également être combiné directement dans Moustache pour former un nouveau

objet ou tableau

tableau

<view wx:
for
-items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
  data: {
    zero: 0
  }
})

Copier après la connexion

est enfin combiné en un tableau [0, 1, 2, 3, 4]

objet

<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
  data: {
    a: 1,
    b: 2
  }
})

Copier après la connexion

L'objet combiné final est {for : 1, bar : 2 >

Vous pouvez également utiliser l'opérateur d'expansion

... pour développer un objet

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})

Copier après la connexion

L'objet combiné final est {a : 1, b: 2, c : 3, d : 4, e : 5>

Si la clé et la valeur de l'objet sont les mêmes, elle peut également être exprimée indirectement

<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
  data: {
    foo: &#39;my-foo&#39;,
    bar: &#39;my-bar&#39;
  }
})

Copier après la connexion

finalement combinée dans L'objet is {foo: 'my-foo', bar: 'my-bar'>

Remarque : les méthodes ci-dessus peuvent être combinées à volonté, mais s'il y a des

noms de variables qui sont les de même, ces derniers couvriront les précédents, tels que

<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      b: 3,
      c: 4
    },
    a: 5
  }
})

Copier après la connexion

L'objet combiné final est {a : 5, b : 3, c : 6}

[Recommandations associées]

Téléchargez le code source complet du mini programme WeChat

Démo du jeu du mini programme WeChat, sélectionnez différents blocs de couleur<.>3.

Démo de l'applet WeChat : transformation d'image en carrousel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!