Vuejs 切换 div 复选框选择的可见性

Question

我正在尝试使用 Vuejs 切换容器的可见性 div 我尝试了以下两种方法，但都没有对容器的可见性产生任何影响。方法一：

<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 加载正常，勾选复选框对文本可见性没有影响。

方法二：

<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

您必须将 checkbox 元素包装在具有 selector id 属性的 div 元素中。

您正在创建的 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 复选框选择的可见性

Vuejs toggle div visibility on checkbox selection

javascript

vue.js

vue-component