「Vue.js」v-showディレクティブを使用するサンプル
書式
<button v-on:click="メソッド名">検証</button>
methods:{
メソッド名: function () {
処理コード
}
}
<p v-show="変数名"> xxxx</p>
使用例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta charset="utf-8">
</head>
<body >
<div id="app">
<button v-on:click="fc">検証</button>
<p v-show="flg"> v-showのサンプル</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
flg: false
},
methods:{
fc: function () {
this.flg = true
}
}
})
</script>
</body>
</html>
結果
「検証」ボタンをクリックすると「v-showのサンプル」というメッセージが表示されます。