Vue.jsのv-showディレクティブ

Vue.jsにはいろいろディレクティブと呼ばれるものがあります。

このディレクティブはhtmlタグ内に記述できます。

今回はv-showディレクティブについて勉強してみたのでまとめてみます。

書き方は

v-show="条件式"

という感じです。条件式がtrueの場合にHTMLが表示されます。


<div id="app" v-show="age >= 20">
{{name}}:{{age}}<br>
</div>
view raw

gistfile1.txt

hosted with ❤ by GitHub

ageが20以上の場合、mustache(マスタッシュ)構文が表示されます。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app" v-show="age >= 20">
{{name}}:{{age}}<br>
</div>
<script src="https://jp.vuejs.org/js/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
name: 'nakamura',
age: 30
}
});
</script>
</body>
</html>
view raw

gistfile1.txt

hosted with ❤ by GitHub

ageは30なので、表示されます。Chromeのコンソールからageを20未満にして表示非表示が切り替わることを試してみます。

Vue.jsのv-showディレクティブ

Vue.jsのv-showディレクティブ

次回はユーザ操作を検知するv-onディレクティブを学習します!

コメント

タイトルとURLをコピーしました