Explication détaillée de la liaison de données et du calcul de l'applet WeChat

Cet article vous présente principalement des informations pertinentes sur des exemples simples de liaison de données dans les mini-programmes WeChat. J'espère que cet article pourra vous aider. Les amis dans le besoin pourront s'y référer. J'espère qu'il pourra aider tout le monde.

Un exemple simple de liaison de données d'applet WeChat

Utilisation simple :

Page({
 data: {
  message: '张三'
 }
})

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
   var content1={
     date: "2020年 10月 8日 ", 
     title："时间群" ,
     nameData:{
       name1:"张三李四",
       name2:"人五人六"，
     },
     fade：true/false 
   }
   this.setData(content);
 },

La liaison de données utilise la syntaxe Moustache (doubles accolades) pour envelopper les variables afin d'obtenir

<view> {{ date}} </view>
<view> {{ title}} </view>
<view> {{ nameData.name1}} </view>
<view> {{ nameData.name2}} </view>//层级用点取值
<image wx:if="{{fade}}" class="image" src=""></image>//隐藏/显示

Cela peut être fait simplement dans {{}} L'opération de

opérateur ternaire

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

calcule

Page({
 data: {
  a: 1,
  b: 2,
  c: 3
 }
})

<view> {{a + b}} + {{c}} + d </view>

输出结果：3 + 3 + d。

Jugement logique

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

peut également être combiné directement dans Moustache pour former un nouvel objet ou un nouvel tableau .

Page({
 data: {
  zero: 0
 }
})

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

Résultat de sortie : combiné en tableau [0, 1, 2, 3, 4] .

Objet

Page({
 data: {
  a: 1,
  b: 2
 }
})

<template is="objectCombine" data="{{for: a, bar: b}}"></template>

L'objet combiné final est {pour : 1 , barre : 2}

Recommandations associées :

Analyse du code source de liaison de données bidirectionnelle Vue

Exemple détaillé de réaction .js Liaison de données du composant parent-enfant Communication en temps réel

Méthode JS pour implémenter la liaison de données bidirectionnelle

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!