WeChat Mini 프로그램 튜토리얼 데이터 바인딩

데이터 바인딩

WXML의 동적 데이터는 해당 페이지의 데이터에서 비롯됩니다.

간단한 바인딩

데이터 바인딩은 "Mustache" 구문(이중 중괄호)을 사용하여 변수를 래핑하며 다음 항목에 적용할 수 있습니다.

콘텐츠

896ed4a4b7d92085d8a5871a0f7d6f27 {{ message }} de5f4c1163741e920c998275338d29b2

Page({  
 data: {  
 message: 'Hello MINA!'  
 }  
})

구성요소 속성(큰따옴표로 묶어야 함)

f223b845138277249b9cbb83c016b4ee de5f4c1163741e920c998275338d29b2

Page({  
 data: {  
 id: 0  
 }  
})

제어 속성(큰따옴표로 묶어야 함)

81f8f5e5f02be6b392bf1cf73e89ce13 20908554640865bb724c429685f97dbe

Page({  
 data: {  
 condition: true  
 }  
})

Operation

은 {{}} 내에서 간단한 작업을 수행할 수 있습니다. 다음 메서드가 지원됩니다.

삼항 작업

4c973292b3af8cbf480d0892c375bca0 숨겨진 de5f4c1163741e920c998275338d29b2

산술 연산

89c662c6f8b87e82add978948dc499d2 }} + d de5f4c1163741e920c998275338d29b2

Page({  
 data: {  
 a: 1,  
 b: 2,  
 c: 3  
 }

보는 내용은 3 + 3 + d입니다

논리적 판단

9790cd95e469294e02d874d9374b36cb 5}}"> de5f4c1163741e920c998275338d29b2

문자열 연산

89c662c6f8b87e82add978948dc499d2{{"hello" + name}}< ;/view>

Page({  
 data:{  
 name:"MINA"  
 }  
})

조합

은 Mustache에서 직접 결합하여 새로운 개체 또는 배열

배열

47750fe6e64545a9ca6568adfedf8ecc {{item}} de5f4c1163741e920c998275338d29b2

Page({  
 data: {  
 zero: 0  
 }  
})

가 최종적으로 배열 [0, 1, 2, 3, 4]
객체

<template is="objectCombine" data="{{for: a, bar: b}}"></template>  
Page({  
 data: {  
 a: 1,  
 b: 2  
 }  
})

최종 결합 객체는 {for: 1, bar: 2}입니다.

확산 연산자를 사용할 수도 있습니다... 객체를 확장하려면

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>  
Page({  
 data: {  
 obj1: {  
  a: 1,  
  b: 2  
 },  
 obj2: {  
  c: 3,  
  d: 4  
 }  
 }  
})

최종 결합 객체는 {a: 1, b: 2, c: 3, d: 4, e: 5}

객체의 키와 값이 같을 경우, 그리고 간접적으로 표현할 수도 있습니다

ea9b0f7cc2981a2d0cf3226947355b6821c97d3a051048b8e55e3c8f199a54b2

Page({  
 data: {  
 foo: 'my-foo',  
 bar: 'my-bar'  
 }  
})

가 최종적으로 객체로 결합됩니다. is {foo: 'my-foo', bar: 'my-bar'}

참고: 위의 방법은 마음대로 결합할 수 있지만 동일한 변수 이름이 있는 경우 후자가 덮어쓰게 됩니다. 예를 들어

300fb0406de500a2b7f33a48299539b321c97d3a051048b8e55e3c8f199a54b2

Page({  
 data: {  
 obj1: {  
  a: 1,  
  b: 2  
 },  
 obj2: {  
  b: 3,  
  c: 4  
 },  
 a: 5  
 }  
})

최종 결합 객체는 {a: 5, b: 3, c: 6}

위는 WeChat 애플릿 튜토리얼의 데이터 바인딩 내용입니다. PHP 중국어 웹사이트(www.php.cn)를 주목해주세요!