VueJSにてDOMの表示非表示を切り替える方法

VueJSにてDOMの表示非表示を切り替える方法
1. サンプルコード

VueJSにてDOMの表示非表示を切り替える方法

サンプルコード

DOM内のv-showプロパティで表示非表示を切り替えることが可能です。

以下がshowプロパティの真理値によってDOM表示を切り替えるサンプルとなります。

<div id="container" class="sample1">
    <p class="sample1-child" v-show="isShow">表示</p>
</div>
<script type="text/javascript">
// Vue
const vm = new Vue({
    el: '#container',
    data: {
        show: false
    },
    computed: {
        isShow: function() {
            return this.show;
        }
    },
    created: function() {
    }
});
</script>