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 の読み込み --> <pre title="https://cdn.jsdelivr.net/npm/vue"></pre> </head> <body> <div id="app"> <div v-show="show">表示されています</div> <button @click="show = !show">ボタン</button> </div> <pre title="./js/main.js"></pre> </body> </html>
./js/main.js
var app = new Vue({ el: '#app', data: { show: true } });
– | 関連ページ |
---|---|
1 | ■【Vue.js入門】使い方・サンプル集 |
2 | ■Javascript入門 サンプル集 |
3 | ■Node.js入門 |
コメント