실전 코드로 배우는 Vue.js

84

실전 코드로 배우는 Vue.js

const App = {

template: `

<div v-if="isVisible">I'm the visible text</div>

<div v-else-if="showSubtitle">I'm the subtitle text</div>

<div v-else>I'm the replacement text</div>

`,

data() {

return {

isVisible: false,

showSubtitle: false,

}

}

}

const app = createApp(App)

app.mount('#app')

CAUTION

v

-

else

-

if

의 순서

v-else-if

를 사용할 때는

v-if

속성이 할당된 엘리먼트 이후에 등장한 엘리먼트에 적용해야 한다.

v

-

if

를 사용한다는 것은 엘리먼트를 조건부로 렌더링한다는 의미다. 그러나

DOM

에서 엘

리먼트를 지나치게 자주 마운트/해제하면 비효율적인 결과를 초래하는 상황도 있다.

그런 경우에는

v

-

show

를 사용하는 것이 좋다.

2.142.14

vv

--

showshow

를 이용한 조건부 표시를 이용한 조건부 표시

v

-

if

와 달리

v

-

show

는 대상 엘리먼트의 가시성만 전환한다.

Vue

는 조건 판단 결과 관계없

이 대상 엘리먼트를 렌더링한다. 렌더링 이후

Vue

는 조건 판단 결과에 따라

CSS

의 ...