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

데이터 바인딩

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

간단한 바인딩

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

콘텐츠

< view> {{ message }}

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

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

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

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

< /view>

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

Operation

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

삼항 작업



산술 연산

}} + d

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

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

논리적 판단



문자열 연산

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

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

조합

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

배열

{{item}}

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}

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

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

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

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

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)를 주목해주세요!