WeChat mini-app (7) detailed introduction to Data Binding and mini-app details

Mini-Programs (7) detailed introduction to Data Binding and mini-Programs

Some of the data binding items are okay for the first few. Some of the following data may not be understood, and some data displayed on the interface cannot be displayed due to conditions. If you don't understand it, you can remember it first, and then you will understand it when you actually use it later. I think so. Record it here

Data. wxml

<! -- Data Binding object --- Content --> <view >{{ message }}</view> <! -- Data Binding objects --- component attributes --- must be enclosed in double quotation marks --> <view id = "item-{id}"> component attributes </view> <! -- Data Binding objects --- control attributes --- must be enclosed in double quotation marks --> <view wx: if = "{condition}"> control attributes </view> <! -- Use an object for Data Binding --- Trielement calculation --> <view hindden = "{flag? True: false }}"> ternary operators </view> <! -- Data Binding objects --- arithmetic operations --> <view> I am the calculation result --- {a + B }}+ {c }}+ d </view> <! -- Data Binding objects --- logical judgment --> <view wx: if = "{length> 5 }}"> asdf </view> <! -- Data Binding objects --- string operations --> <view >{{ "Hello" + name }}</view> <! -- Data Binding objects --- array combination --> <view wx: for = "{[zero, 1, 2, 3, 4, 5, 6] }}" >{{ item }}</view> <! -- Data Binding object --- object --> <template is = "objectCombine" data = "{for: x, bar: y}" ></template> <! -- Use object for Data Binding --- extension operator object... expand an object --> <template is = "objectCombine" data = "{{... obj1 ,... obj2, p: 5 }}"> </template> <! -- Data Binding use object --- the key and value of the object are the same --> <template is = "objectCombine" data = "{foo, bar}"> </template>

Data. js

Page ({data: {// content bound message: 'Hello webapp', // Component Property bound id: 0, // control property bound condition: true, // Trielement flag: false, // arithmetic operation a: 1, B: 2, c: 3, // logical Judgment length: 6, // string operation name: 'subo', // array Combination zero: 0, // object x: 0, y: 1, // object expansion obj1: {a: 1, B: 2 }, obj2: {c: 3, d: 4}, p: 5, // the key and value of the object are both foo: 'My-foo', bar: 'My-bar '},})

Related Articles:

Hello WeApp icon component
Window text Component switch component
Tabss component action-sheet
Application lifecycle button Component modal component
Page lifecycle checkbox component toast component
Modular Details form component details loading component
Data Binding input component navigator component
View component picker component audio component
Scroll-view component radio component video component
Swiper component slider component Image component