Detailed explanation of data binding and calculation of WeChat applet

小云云
Release: 2018-02-07 13:56:40
Original
2553 people have browsed it

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);
 },
Copy after login

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>//隐藏/显示
Copy after login

You can perform simple operations within {{}}

Ternary Operator


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

Calculation


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


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

输出结果:3 + 3 + d。
Copy after login

Logical judgment


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

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


Page({
 data: {
  zero: 0
 }
})
Copy after login


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

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

Object


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


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

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template