


Example analysis of data binding in WeChat applet (code)
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: 'Hello MINA!' } })
2. Binding of label attributes
wxml中,其中绑定的要在双引号之中: <view id="{{id}}"> </view> js中: Page({ data: { id: 0 } })
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不生成节点
4. Keywords (need to be within double quotes)
true:boolean 类型的 true,代表真值。 false: boolean 类型的 false,代表假值。 <checkbox checked="{{false}}"> </checkbox> 特别注意:不要直接写 checked="false",其计算结果是一个字符串,转成 boolean 类型后代表真值。 //在新版的微信小程序开发工具中,这个问题好像被解决了,即checked="true"也是对的
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: 'MINA' } }) 5>数据路径运算 <view>{{object.key}} {{array[0]}}</view> Page({ data: { object: { key: 'Hello ' }, array: ['MINA'] } }) //综上: 所有运算都是在{{}}之中进行的,这时候里面就相当于一些语言代码,而不是要呈现的内容
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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.

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

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? 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

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 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

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 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
