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

您必须使用function selectPackage(index,t) { if (t.is(':checked')) { console.log("Checked condition"); var packageRow=$("#serviceTable tr.defaultPackageRow"); console.log("Package Row :"+packageRow); $("#serviceTable tr.defaultServiceRow").replaceWith(packageRow); } else { console.log("Un-Checked condition"); var serviceRow=$("#serviceTable tr.defaultServiceRow"); console.log("Package Row :"+serviceRow); $("#serviceTable tr.defaultServiceRow").replaceWith(serviceRow); } } id属性在checkbox元素中包含div元素。

您创建它的selector元素仅适用于包含vue的div。

＆＃13;

checkbox

＆＃13;

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

＆＃13;

Vuejs在复选框选择上切换div可见性

1 个答案: