【Vue.js】DOMの削除(v-show)

Javascript用フレームワーク「Vue.js」でDOMをHidden・削除(v-show)する方法をソースコード付きでまとめました。

条件分岐(v-if, v-else)

Javascript用フレームワーク「Vue.js」では、v-show属性でDOMのHidden・削除ができます。

書式

<div v-show="変数名">v-if DOM</div>
<div v-else>v-else DOM</div>

変数値がtrueなら、v-show属性のdivタグが描画されます。
falseなら、「display:hidden;」が付与され、DOM自体が削除され描画されなくなります。

サンプルコード

サンプルプログラムのソースコードです。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<!-- Vue.js の読み込み -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>

<div id="app">
  <div v-show="show">表示されています</div>
  <button @click="show = !show">ボタン</button>
</div>

<script src="./js/main.js"></script>
</body>
</html>

./js/main.js

var app = new Vue({
    el: '#app',
    data: {
      show: true
    }
});
関連ページ
1 【Vue.js入門】使い方・サンプル集
2 Javascript入門 サンプル集
3 Node.js入門
関連記事