「Vue.js」v-showディレクティブを使用するサンプル

2022年2月24日

書式
<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のサンプル」というメッセージが表示されます。

Vue.js

Posted by arkgame

Related posts: