記事の内容
v-show
v-showは、真偽値にて表示や非表示を切り替えるディレクティブになります。
※templateタグには使用できない
記法
[ HTML ] =============================
<要素名 v-show=”真偽値”>
表示内容
</要素名>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-showについて</title>
</head>
<body>
<div id="app">
<button @click="show = !show">表示/非表示</button>
<p v-show="show">v-showに関して</p>
</div>
<script src="./js/show.js"></script>
</body>
</html>
Vue.createApp({
data() {
return {
show: true,
};
},
}).mount("#app");
出力結果
v-showに関して
v-ifとv-showの違い
v-ifとv-showの違いは、動作後のタグの動きに違いがあります。
v-if タグごと非表示
v-show 【display:none;】で非表示 ( 頻繁に切り替えがある場合に使用する )
v-if
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-ifについて</title>
</head>
<body>
<div id="app">
<button @click="show = !show">表示/非表示</button>
<p v-if="show">v-ifに関して</p>
</div>
<!-- Vue3をCDNで使用 -->
<script src="https://unpkg.com/vue@next"></script>
<script src="./js/if.js"></script>
</body>
</html>
v-show
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-showについて</title>
</head>
<body>
<div id="app">
<button @click="show = !show">表示/非表示</button>
<p v-show="show">v-showに関して</p>
</div>
<!-- Vue3をCDNで使用 -->
<script src="https://unpkg.com/vue@next"></script>
<script src="./js/if.js"></script>
</body>
</html>