Detailed explanation of data binding and calculation of WeChat applet

This article mainly introduces to you the relevant information on simple examples of data binding in WeChat mini programs. I hope this article can help you. Friends in need can refer to it. I hope it can help everyone.

A simple example of WeChat applet data binding

Simple usage:

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

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

Data binding uses Mustache syntax (double braces) to wrap variables to obtain

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

You can perform simple operations within {{}}

Ternary Operator

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

Calculation

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

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

输出结果：3 + 3 + d。

Logical judgment

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

can also be combined directly in Mustache to form a new object or array.

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

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

Output result: combined into an array [0, 1, 2, 3, 4].

Object

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

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

The final combined object is {for: 1, bar: 2 }

Related recommendations:

Vue two-way data binding source code analysis

Example detailed explanation of react.js parent-child component data binding Define real-time communication

JS method to implement two-way data binding

The above is the detailed content of Detailed explanation of data binding and calculation of WeChat applet. For more information, please follow other related articles on the PHP Chinese website!