Don*_*the 7 javascript vue.js vue-component
我试图使用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>
再次勾选复选框无效.有任何想法吗？
您必须使用id属性checkbox在div元素中包装元素selector.
vue您正在创建它的元素仅适用于包含该元素的div checkbox.
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>| 归档时间： |
|
| 查看次数： |
7025 次 |
| 最近记录： |