JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>

<div id="app">
  <div>
    <h1 v-if="isShown">**v-if** isShown이 true면 출력됩니다.</h1>
    <h1 v-else>**v-else** isShown이 false면 출력됩니다.</h1>
    <h1 v-if="isShown">**v-show** isShown이 true면 출력됩니다.</h1>
    <p>v-if는 실제 조건에 맞는 경우에만 렌더링합니다.</p>
    <p>v-show는 항상 렌더링한 후 `display`만 변경합니다.</p>
  </div>
</div>

JavaScript

new Vue ({
	el: '#app',
  data: function () {
  	return {
    	isShown: true
    }
  }
})