소규모 프로그램 개발을 위한 데이터 바인딩

데이터 바인딩

WXML의 동적 데이터는 해당 페이지의 데이터에서 가져옵니다.

간단한 바인딩

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

콘텐츠

<view> {{ message }} </view>
Page({
  data: {
    message: &#39;Hello MINA!&#39;
  }
})

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

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

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

<view wx:
if
="{{condition}}"> </view>
Page({
  data: {
    condition: true
  }
})

키워드(큰따옴표로 묶어야 함)

true: 부울 유형의 true, 참값을 나타냅니다.

false: 부울 유형의 false, false 값을 나타냅니다.

<checkbox checked="{{false}}"> </checkbox>

특별 참고 사항: Checked="false"를 직접 쓰지 마세요. 계산 결과는 문자열이며, 이는 참 값을 나타내기 위해 부울 유형으로 변환됩니다.

연산

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

3항 연산

<view hidden="{{flag ? true : false}}"> Hidden </view>

산술연산

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

보는 내용은 3 + 3 + d

논리적 판단

<view wx:if="{{length > 5}}"> </view>

문자열 연산

<view>{{"hello" + name}}</view>
Page({
  data:{
    name:"MINA"
  }
})

데이터 경로 연산

<view>{{
object
.
key
}} {{
array
[0]}}</view>
Page({  data: {
    object: {
      key: &#39;Hello &#39;
    },    array: [&#39;MINA&#39;]
  }
})

Composition

도 결합 가능 Mustache에서 직접 새로운 객체 또는 배열

배열

<view wx:
for
-items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
  data: {
    zero: 0
  }
})

을 형성하고 최종적으로 배열 [0, 1, 2, 3, 4]

Object

<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}

객체의 키와 값이 동일하면 간접적으로 표현할 수도 있습니다.

<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
  data: {
    foo: &#39;my-foo&#39;,
    bar: &#39;my-bar&#39;
  }
})

최종 결합 객체는 {foo: 'my-foo', bar: 'my-bar' }

참고: 위의 방법은 마음대로 조합할 수 있지만 동일한 변수 이름이 있으면 후자가 이전 방법을 덮어쓰게 됩니다.

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

개체는 {a: 5, b: 3, c: 6}

[관련 권장 사항]

WeChat 애플릿 전체 소스 코드 다운로드입니다.

2. WeChat 미니 프로그램 게임 데모 다양한 색상 블록 선택

WeChat 미니 프로그램 데모: 회전식 이미지 변환

위 내용은 소규모 프로그램 개발을 위한 데이터 바인딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!