ホームページ > WeChat アプレット > ミニプログラム開発 > WeChat アプレットのデータ バインディングについての深い理解

WeChat アプレットのデータ バインディングについての深い理解

高洛峰
リリース: 2017-03-28 13:43:26
オリジナル
1758 人が閲覧しました

この記事は主に、WeChat ミニプログラムのデータバインディングの詳細な導入に関する関連情報を紹介します。必要な友人はそれを参照してください

WeChat アプレットのデータ バインディングについての深い理解

データバインディングの最初のいくつかは問題ないようですが、後のいくつかは問題があるかもしれません。いくつか理解できません。インターフェースに表示されるデータの一部が条件により表示されません。分からないならまず覚えておいて、後で実際に使うと分かるようになる、と思います。まずここに記録してください

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>
ログイン後にコピー

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;



 },
})
ログイン後にコピー

以上がWeChat アプレットのデータ バインディングについての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート