Muscardinus

Conditional Rendering 본문

FrontEnd/Vue

Conditional Rendering

Muscardinus 2021. 12. 29. 02:06
728x90

상황에 따라서 보여지고 싶은것과 보여지기 싫은 부분이 있을 것이다.

 

이를 위해서 Vue에서는 v-if / v-else-if / v-else가 있다.

 

<!DOCTYPE >
<html>
  <head>
    <title>VueJS Course</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>

  <body>
    <div id="app">
      <p v-if="mode === 1">Showing v-if directive content</p>
      <p v-else-if="mode === 2">v-else-if</p>
      <p v-else>v-else</p>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="app.js"></script>
  </body>
</html>

 

만일 조건문에 한 덩어리의 html을 넣고 싶으면

 <template v-else-if="+mode === 2">
   <p>Bonus content</p>
   <p>v-else-if</p>
 </template>

template를 사용하자

 

v-if 말고, v-show도 있다.

 

<i v-show="+mode === 1">v-show</i>

v-show로 할 경우, html을 확인할때, 조건이 부합하지 않으면 display:none이라는 style이 들어간다.

v-show의 경우 template에 사용할 수 없으며,

주로 toggle에 사용된다.

728x90

'FrontEnd > Vue' 카테고리의 다른 글

Vue Life Cycle  (0) 2021.12.31
List Rendering  (0) 2021.12.29
Style Binding  (0) 2021.12.29
Class Bind  (0) 2021.12.29
Computed  (0) 2021.12.29
'FrontEnd/Vue' Related Articles more
Comments