● v-if/v-else-if/v-else

v-if는 <template> 태그 영역에서 조건부 렌더링 기능을 구현하는 디렉티브입니다. 조건부 렌더링이란 디렉티브에 할당된 값의 참/거짓에 따라 HTML 요소를 렌더링하거나 렌더링하지 않는 것을 의미합니다.

v-if/src/App.vue

<script>
export default {
  data() {
    return {

      visible: true,
      unvisible: false,

    };
  },
};
</script>
<template>

  <p v-if="visible">이 요소는 렌더링됩니다.</p>
  <p v-if="unvisible">이 요소는 렌더링되지 않습니다.</p>

</template>
<style></style>