我正在try 使用Vuejs切换容器div的可见性.我try 了以下两种方法,但都不会影响容器的可见性.方法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加载OK,勾选复选框对文本可见性没有影响.

方法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>

同样,勾选复选框没有效果.有什么 idea 吗?

推荐答案

必须用selector id属性将checkbox个元素包装在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>

Vue.js相关问答推荐

使用插槽的VUE 3工作台

vue3中的转换可以在滑入但不能滑出时工作

Vue ChildComponent (GrandchildComponent) 应该更新 ParentComponent 的列表

为什么在 Vue2 中调用 this.$emit() 后 props 没有立即更新?

v-model 修饰符返回空

当用户在嵌套路由中时激活链接

我是否必须在 Vue 3 中使用 Composition API,还是仍然可以使用Vue 2的方式工作?

如何在 Vue 中编译从外部 api 加载的模板

在下拉菜单上使用箭头键滚动

Vue.js 中有没有类似Jquery $(document).ready的功能?

如何在异步功能上使用 debounce?

是否可以在没有 Vue 的情况下使用 Vuex?

查看 cli3 启用 CORS

如何在不实例化根实例的情况下使用 vue 组件?

webpack模块解析失败意外字符'@'

v-for 中的 VueJS 插槽

Jest错误找不到模块....

如何避免在 Vue 中一直写 this.$store.state.donkey 的需要?

如何从 vue 组件调用 App.vue 中的方法

使用 svelte js 的原因