vue.js가 지도를 탐색하는 방법

Vue.js 지도 탐색 방법: Vue는 지도를 탐색하기 위해 [v-for]를 사용하며, 코드는 [d074bd18377a20b9b01333c8085ef377].

이 튜토리얼의 운영 환경: windows10 시스템, vue2.9, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

【추천 관련 글 : vue.js】

vue.js 지도 순회 방법 :

객체 데이터는 다음과 같습니다.

"cities": {
"A": [{
"id": 56,
"spell": "aba",
"name": "阿坝"
}, {
"id": 57,
"spell": "akesu",
"name": "阿克苏"
}],
"B": [{
"id": 58,
"spell": "baiyin",
"name": "白银"
}, {
"id": 59,
"spell": "bangbu",
"name": "蚌埠"
}],
"C": [{
"id": 60,
"spell": "chengdu",
"name": "成都"
}, {
"id": 61,
"spell": "cangzhou",
"name": "沧州"
}]

순회 방법은 다음과 같습니다.

<div class="area" v-for="(item, key) of cities" :key="key">
                <div class="title border-topbottom">{{key}}</div>
                <div class="item-list">
                    <div class="item border-bottom" v-for="innerItem of item" :key="innerItem.id">{{innerItem.name}}</div>
                </div>
            </div>

핵심은 v-for="(item, key) of cities"，相当于Map结构的 (key, value)

관련 무료 학습 권장 사항: JavaScript(동영상)

위 내용은 vue.js가 지도를 탐색하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!