v-show/src/App.vue
<script>
export default {
data() {
return {
condition: true,
};
},
}
</script>
<template>
<p v-show="condition">v-show 디렉티브는 조건이 참입니다.</p> <p v-show="!condition">v-show 디렉티브는 조건이 거짓입니다.</p>
</template>
코드를 실행하면 v-show 디렉티브의 값이 참인 요소만 화면에 보입니다.
그림 3-17 실행결과