Vuejs在復選框選擇上切換div可見性

Question

我試圖使用Vuejs切換容器div的可見性我已經嘗試了兩種方法，但是對容器的可見性都沒有任何影響。 方法1：

<body>
    <div class="checkbox" id = "selector">
        <label><input type="checkbox" v-model="checked">Options</label>
    </div>
    <div class="container" id="app-container" v-if="checked">
        <p>Text is visible</p>
    </div>
<script src="path_to_/vue.js"></script>
<script>
    var app = new Vue({
        el: '#selector',
        data: {
            "checked": false
        }
     })
</script>
</body>

我知道Vue.js加載好了，勾選復選框對文本可見性沒有影響。

方法2：

<body>
    <div class="checkbox" id = "selector">
        <label><input type="checkbox" v-on:click="seen = !seen">Options</label>
    </div>
    <div class="container" id="app-container" v-if="seen">
        <p>Text is visible</p>
    </div>
<script src="path_to_/vue.js"></script>
<script>
    var app = new Vue({
        el: '#selector',
        data: {
            "seen": false
        }
     })
</script>
</body>

再次勾選復選框無效。 有任何想法嗎？

Answer 1

您必須使用selector id屬性在div元素中包裝checkbox元素。

您正在創建它的vue元素僅適用於包含checkbox的div。

 var app = new Vue({ el: '#selector', data: { checked: false } });

 <script src="https://unpkg.com/vue/dist/vue.js"></script> <body> <div id="selector"> <div class="checkbox"> <label><input type="checkbox" v-model="checked">Options</label> </div> <div class="container" id="app-container" v-if="checked"> <p>Text is visible</p> </div> </div> </body>

Vuejs在復選框選擇上切換div可見性

問題描述

1 個解決方案

解決方案1
8 已采納 2017-02-18 10:51:04

Vuejs在復選框選擇上切換div可見性

問題描述

1 個解決方案

解決方案1 8 已采納 2017-02-18 10:51:04

解決方案1
8 已采納 2017-02-18 10:51:04