uniapp이 조건부 렌더링과 목록 렌더링을 사용하는 방법

Uniapp은 조건부 렌더링 및 목록 렌더링 방법을 사용합니다. 1. [v-if] 명령은 콘텐츠를 조건부로 렌더링하는 데 사용됩니다. 2. [v-show]는 조건에 따라 요소를 표시합니다. 명령 배열을 기반으로 목록을 렌더링합니다.

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천(무료): uni-app 개발 튜토리얼

uniapp에서 조건부 렌더링 및 목록 렌더링을 사용하는 방법:

1 조건부 렌더링

1.v-if 지시어는 조건부 렌더링에 사용됩니다. 콘텐츠

Vue is awesome!
data:function() {
    return {
       awesome:true     //true或false
    }
}

2. v-else를 사용하여 v-if의 "else-if 블록" 역할을 하는 "else 블록"

Vue is awesome!
Oh no
data:function() {
    return {
  awesome:true    //为true时正常显示，为false时显示Oh no
    }
}

3을 추가할 수도 있습니다.

A
B
C
Not A/B/C
data:function() {
    return {
    type:'A'   //A或B或C  什么都不写的话则显示 Not A/B/C
    }
}

4. v-show는 조건에 따라 요소를 표시합니다.

Hello!
data:function() {
    return {
 ok:true    //为true时显示Hello!，为false时则不显示
    }
}

5. v-if와 v-show의 차이점

v-if는 "실제" 조건부 렌더링이므로 전환 프로세스 중 조건부 블록의 이벤트 리스너 및 하위 구성 요소가 적절하게 삭제되고 다시 작성됩니다. (실행 조건이 거의 변하지 않을 때 사용)

v-show 요소는 항상 렌더링되어 DOM에 유지됩니다. v-show는 단순히 요소의 CSS 속성 표시(없음/블록)를 전환합니다. (자주 전환할 때 사용)

2. 목록 렌더링

1. 배열 기반으로 목록을 렌더링하려면 v-for 명령을 사용하세요. 항목의 양식 항목에 대한 특수 구문이 필요합니다. 여기서 항목은 소스 데이터 배열이고 항목은 반복되는 배열 요소에 대한 별칭입니다.

{{index}} : {{item.msg}}
data:function() {
return {
items:[
{msg:'Foo'},
{msg:'Bar'}
]
}
}

2. v-for에서 객체 사용

{{key}} : {{value}}
object:{
title:'How to do lists in Vue',
author:'Jane Doe',
publishedAt:'2020-3-10',
}

위 두 예제의 결과는 다음과 같습니다.

관련 무료 학습 권장 사항: php 프로그래밍(동영상)

위 내용은 uniapp이 조건부 렌더링과 목록 렌더링을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!