Home WeChat Applet Mini Program Development Example analysis of data binding in WeChat applet (code)

Example analysis of data binding in WeChat applet (code)

Aug 21, 2018 pm 04:38 PM
data binding

This article brings you an example analysis (code) of data binding in WeChat applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. The WeChat applet cannot bind the tags in the wxml page from the js page to obtain or set the value or attribute of the tag. All are implemented using data binding
2. The dynamic data in WXML comes from the data of the corresponding Page.

Data binding:
1. Simple data binding

wxml中应用双大括号将data中的数据绑定到相应的标签中:
<view> {{ message }} </view>
js中:
Page({
  data: {
    message: &#39;Hello MINA!&#39;
  }
})
Copy after login

2. Binding of label attributes

wxml中,其中绑定的要在双引号之中:
<view id="{{id}}"> </view>
js中:
Page({
  data: {
    id: 0
  }
})
Copy after login

3. Control Attribute binding

wxml中(绑定在双引号中)
<view wx:if="{{condition}}"> </view>
//作为条件句出现,可以动态决定某一个标签出现不出现
js中:
Page({
  data: {
    condition: true
  }
})
---或---
wxml中(绑定在双引号中)
<view hidden="{{condition}}"> </view>
//作为条件句出现,可以动态决定某一个标签出现不出现
js中:
Page({
  data: {
    condition: true
  }
})
//hidden与wx:if的区别:
hidden只是隐藏,但是节点是生成的
wx:if不生成节点
Copy after login

4. Keywords (need to be within double quotes)

true:boolean 类型的 true,代表真值。

false: boolean 类型的 false,代表假值。

<checkbox checked="{{false}}"> </checkbox>
特别注意:不要直接写 checked="false",其计算结果是一个字符串,转成 boolean 类型后代表真值。
//在新版的微信小程序开发工具中,这个问题好像被解决了,即checked="true"也是对的
Copy after login

5. Operation

1>三元运算

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

2>算数运算

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})
view中的内容为 3 + 3 + d。

3>逻辑判断

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

4>字符串运算

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

5>数据路径运算

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

//综上:
所有运算都是在{{}}之中进行的,这时候里面就相当于一些语言代码,而不是要呈现的内容
Copy after login

6. Combination (not very common, no longer If necessary, please refer to the WeChat Mini Program Development Document, Data Binding Section)

Related recommendations:

Customized analysis process of data in WeChat Mini Program

Detailed explanation of the usage of iconfont in WeChat mini program (with code)

WeChat mini program example: implementing random verification code (with code)

The above is the detailed content of Example analysis of data binding in WeChat applet (code). For more information, please follow other related articles on the PHP Chinese website!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to implement data binding function in SwiftUI using MySQL How to implement data binding function in SwiftUI using MySQL Jul 30, 2023 pm 12:13 PM

How to use MySQL to implement data binding function in SwiftUI. In SwiftUI development, data binding can realize automatic updating of interface and data, improving user experience. As a popular relational database management system, MySQL can store and manage large amounts of data. This article will introduce how to use MySQL to implement data binding function in SwiftUI. We will make use of Swift's third-party library MySQLConnector, which provides connections and queries to MySQL data.

Detailed explanation of data binding functions in Vue documentation Detailed explanation of data binding functions in Vue documentation Jun 20, 2023 pm 10:15 PM

Vue is an open source JavaScript framework mainly used for building user interfaces. The core of Vue is data binding, which provides a convenient and efficient way to achieve two-way binding between data and views. Vue's data binding mechanism is handled through some special functions. These functions can help us automatically bind the data in the template to the corresponding properties in the JavaScript object, so that when the properties in the JavaScript object are modified, the data in the template will also automatically

How to use the v-once directive to implement one-time rendering of data binding in Vue How to use the v-once directive to implement one-time rendering of data binding in Vue Jun 11, 2023 pm 01:56 PM

Vue is a popular front-end JavaScript framework that provides many instructions to simplify the data binding process. One of the very useful instructions is v-once. In this article, we will delve into the use of the v-once directive and how to implement data-bound one-time rendering in Vue. What is the v-once instruction? v-once is a directive in Vue. Its function is to cache the rendering results of elements or components so that their rendering process can be skipped in subsequent updates.

Vue error: v-model cannot be used correctly for two-way data binding. How to solve it? Vue error: v-model cannot be used correctly for two-way data binding. How to solve it? Aug 19, 2023 pm 08:46 PM

Vue error: v-model cannot be used correctly for two-way data binding. How to solve it? Introduction: Two-way data binding is a very common and powerful feature when developing with Vue. However, sometimes we may encounter a problem, that is, when we try to use v-model for two-way data binding, we encounter an error. This article describes the cause and solution of this problem, and provides a code example to demonstrate how to solve the problem. Problem Description: When we try to use v-model in Vue

Detailed explanation of v-model function in Vue3: application of two-way data binding Detailed explanation of v-model function in Vue3: application of two-way data binding Jun 18, 2023 am 10:25 AM

With the continuous development of front-end technology, Vue, as a popular front-end framework, is also constantly updated and iterated. The latest version, Vue3, introduces many new features, making it more convenient and flexible to use. Among them, the v-model function is one of the new features worth mentioning in Vue3. It can achieve two-way data binding, that is to say, when using the v-model function, it can not only easily realize communication between parent and child components, but also automatically bind the data input by the user to the data in the component.

Vue Development Notes: Avoid Common Mistakes and Pitfalls Vue Development Notes: Avoid Common Mistakes and Pitfalls Nov 23, 2023 am 10:37 AM

Vue Development Notes: Avoid Common Mistakes and Pitfalls Introduction: Vue.js is a popular JavaScript framework that is widely used to build modern interactive front-end applications. Although Vue.js provides a simple, flexible and efficient development method, you may still encounter some common errors and pitfalls during the development process. This article will introduce some common Vue development considerations to help developers avoid these mistakes and traps and improve development efficiency and code quality. Note 1: Reasonable use of v-if and

How does Vue implement two-way binding of data? How does Vue implement two-way binding of data? Jun 27, 2023 pm 04:46 PM

Vue is a popular JavaScript framework that provides a convenient way to implement two-way binding of data. This article will introduce how Vue implements two-way binding of data. Vue implements two-way binding through the MVVM framework, and the MVVM mode consists of Model-View-ViewModel. Model represents data and business logic, View represents UI interface, and ViewModel is the bridge between Model and View. In Vue, data binding is based on the Vue implementation

How to use Vue for form validation and data binding How to use Vue for form validation and data binding Aug 02, 2023 am 10:54 AM

How to use Vue for form validation and data binding Introduction: With the continuous development of front-end development, form validation of user input has become an important link. As a popular front-end framework, Vue.js provides a series of functions to simplify the process of form validation and data binding. This article will introduce how to use Vue for form validation and data binding, and give corresponding code examples. 1. Basic data binding: In Vue, we can use the v-model directive to achieve two-way binding of data. Place the input element

See all articles