튜토리얼은 WeChat Mini 프로그램 개발 튜토리얼(기본) 7-데이터 바인딩에서 계속됩니다. 데이터 세트를 표시해야 하는 경우 wx:for
//.wxml <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> //.js age({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } })
를 사용할 수 있습니다. 여기서 index
는 현재 데이터입니다. index. 기본 변수 이름, item
은 현재 데이터 항목의 기본 변수 이름입니다. wx:for-item
및 wx:for-index
을 사용하여 별칭을 지정할 수도 있습니다.
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view>
를 중첩할 수도 있습니다. 예를 들어 다음은
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view> </view> </view>
와 유사합니다. block wx:if
또한 2b5957c2850173214f4ea7f1261e9a0f 태그에서 wx:for
를 사용하여 여러 노드가 포함된 구조 블록을 렌더링할 수 있습니다.
<block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view> </block>
이유를 알아보세요. >가 필요합니다. 먼저 예를 살펴보겠습니다. wx:key
//.wxml <checkbox wx:for="{{objectArray}}" value="{{item.name}}" style="display: block;"> {{item.name}} </checkbox> <button bindtap="addToFront">在上方添加一个新的check组件</button> //.js Page({ data: { objectArray: [ {id: 1, name: '我没有被选中'}, {id: 2, name: '我没有被选中'}, ], }, addToFront: function(e) { const length = this.data.objectArray.length this.data.objectArray = [{id: length, name: '我没有被选中'}].concat(this.data.objectArray) this.setData({ objectArray: this.data.objectArray }) }, })위 코드는 두 개의
checkbox 구성 요소와 버튼을 클릭하면 새로운 구성 요소가 추가됩니다. 상단에. checkbox
코드를 컴파일하면 다음 인터페이스가 표시됩니다.
//wxml <checkbox-group bindchange="checkboxChange"> <checkbox wx:for="{{objectArray}}" value="{{item.id}}" style="display: block;" > {{item.name}} </checkbox> </checkbox-group> <button bindtap="addToFront">在上方添加一个新的check组件</button> //js Page({ data: { objectArray: [ {id: 1, name: '我没有被选中'}, {id: 2, name: '我没有被选中'}, ], }, addToFront: function(e) { const length = this.data.objectArray.length this.data.objectArray = [{id: length + 1, name: '我没有被选中'}].concat(this.data.objectArray) this.setData({ objectArray: this.data.objectArray }) }, checkboxChange: function(e){ console.log('checkboxChange') const length = this.data.objectArray.length let checkBoxArray = this.data.objectArray for (let i = 0; i < length; i++) { let ischecked = false for (let j = 0; j < e.detail.value.length; j++){ if (checkBoxArray[i].id == e.detail.value[j]){ checkBoxArray[i].name = '我被选中了' ischecked = true } } if (!ischecked){ checkBoxArray[i].name = '我没有被选中' } } this.setData({ objectArray: this.data.objectArray }) } })첫 번째 체크박스를 선택했을 때의 인터페이스는 다음과 같습니다
wx:key
<checkbox-group bindchange="checkboxChange"> <checkbox wx:for="{{objectArray}}" wx:key = "id" value="{{item.id}}" style="display: block;" > {{item.name}} </checkbox> </checkbox-group> <button bindtap="addToFront">在上方添加一个新的check组件</button>를 사용하여 위 코드와 같이 .wxml 파일을 수정해야 원하는 효과를 얻을 수 있다는 것이 핵심입니다. 🎜 >
목록에 있는 항목의 위치가 동적으로 변경되거나 새 항목이 목록에 추가되고 목록에 있는 항목이 고유한 특성과 상태(예: c313d552d49476c9da0101fbeb0d3c07wx:key = "id"
, 698d939a2c9041f2302734cfeb04788e 선택 상태), 목록에서 항목의 고유 식별자를 지정하려면
2개의 예약된 키워드
의 값은 두 가지 형식으로 제공됩니다.wx:key
1 문자열은 for 루프 배열의 항목 속성을 나타냅니다. 속성 값은 유일한 문자열 또는 숫자여야 합니다. 목록에 있으며 동적으로 변경할 수 없습니다.는 for 루프에서 항목 자체를 나타냅니다.
wx:key
위 내용은 WeChat 공식 튜토리얼에서 인용되었습니다. . 뷰 구성 요소의 상태를 유지하는 것 외에도*this
을 사용하면 렌더링 효율성을 높이는 데 도움이 될 수 있습니다.
데이터 변경으로 인해 렌더링 레이어가 다시 렌더링되면 키와 프레임이 있는 구성 요소가 수정됩니다. . 구성 요소가 자체 상태를 유지하고 목록 렌더링의 효율성을 향상시키기 위해 다시 생성되지 않고 재정렬되도록 합니다. wx:key
위 내용은 미니 프로그램 개발의 기초: 데이터 바인딩(8)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!