Maison > Applet WeChat > Développement de mini-programmes > Compréhension approfondie de la liaison de données de l'applet WeChat

Compréhension approfondie de la liaison de données de l'applet WeChat

高洛峰
Libérer: 2017-03-28 13:43:26
original
1758 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur l'introduction détaillée de la liaison de données du mini programme WeChat. Les amis qui en ont besoin peuvent se référer à

Compréhension approfondie de la liaison de données de lapplet WeChat

La liaison de données inclut certains des éléments. premiers Cela semble correct, mais certains des éléments suivants peuvent ne pas être compris et certaines des données affichées sur l'interface ne peuvent pas être affichées en raison de conditions. Si vous ne le comprenez pas, vous pouvez vous en souvenir d'abord, et vous le comprendrez lorsque vous l'utiliserez réellement plus tard. Quoi qu'il en soit, c'est ce que je pense. Enregistrez d'abord ici

data.wxml


<!--数据绑定使用对象---内容-->
<view>{{message}}</view>

<!--数据绑定使用对象---组件属性---需要在双引号之内-->
<view id="item-{{id}}">组件属性</view>

<!--数据绑定使用对象---控制属性---需要在双引号之内-->
<view wx:if="{{condition}}">控制属性</view>

<!--数据绑定使用对象---三元运算-->
<view hindden="{{flag ? true : false}}">三元运算符</view>

<!--数据绑定使用对象---算数运算-->
<view>我是运算结果---{{a + b}} + {{c}} + d</view>

<!--数据绑定使用对象---逻辑判断-->
<view wx:if="{{length > 5}}">asdf</view>

<!--数据绑定使用对象---字符串运算-->
<view>{{"Hello " + name}}</view>

<!--数据绑定使用对象---数组组合-->
<view wx:for="{{[zero, 1, 2, 3, 4, 5, 6]}}">{{item}}</view>

<!--数据绑定使用对象---对象-->
<template is="objectCombine" data="{{for: x, bar: y}}"></template>

<!--数据绑定使用对象---扩展运算符对象 ... 将一个对象展开-->
<template is="objectCombine" data="{{...obj1, ...obj2, p: 5}}"></template>

<!--数据绑定使用对象---对象的key和value相同时-->
<template is="objectCombine" data="{{foo, bar}}"></template>
Copier après la connexion

data.js


Page({
 data:{

 //内容绑定
 message: &#39;Hello WeApp&#39;,

 //组件属性绑定
 id: 0,

 //控制属性绑定
 condition: true,

 //三元运算
 flag:false,

 //算数运算
 a: 1,
 b: 2,
 c: 3,

 //逻辑判断
 length: 6,

 //字符串运算
 name: &#39;顺子&#39;,

 //数组组合
 zero: 0,

 //对象

 x: 0,
 y: 1,

 //对象展开
 obj1: {
  a: 1,
  b: 2
 },
 obj2: {
  c: 3,
  d: 4
 },
 p: 5,

 //对象key和value形同时
 foo: &#39;my-foo&#39;,
 bar: &#39;my-bar&#39;



 },
})
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal