new Vue({
el: '#selector',
data: {
checked: false,
unchecked: true
},
methods: {
hidecont() {
this.checked = !this.unchecked;
}
});<div id="selector">
<div class="checkbox">
<label><input type="checkbox" v-model="checked" @click="hidecont" >Options</label>
</div>
<div class="container" id="app-container" v-if="unchecked">
<p>Text is visible</p>
</div>
</div>我已經使用 check=!checkedd 之類的方法進行了切換，但仍然無法隱藏內容。
最初復選框和文本內容應該是可見的。所以一旦用戶點擊復選框，內容將被隱藏。
uj5u.com熱心網友回復：
data 屬性必須是函式：
new Vue({
el: '#selector',
data() {
return {
checked: false,
}
},
methods: {
hidecont() {
this.checked = !this.checked;
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="selector">
<div class="checkbox">
<label><input type="checkbox" v-model="checked" @click="hidecont" >Options</label>
</div>
<div class="container" id="app-container" v-if="!checked">
<p>Text is visible</p>
</div>
</div>uj5u.com熱心網友回復：
不需要幾個變數來處理這個邏輯。
您可以只保存 'checked' 變數，它是雙向系結的，當復選框被選中時，它將為真。
這是我的代碼。
new Vue({
el: '#selector',
data: {
checked: false,
},
})
<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>
uj5u.com熱心網友回復：
new Vue({
el: '#selector',
data() {
return {
checked: false,
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="selector">
<div class="checkbox">
<label><input type="checkbox" v-model="checked" @click="hidecont" >Options</label>
</div>
<div class="container" id="app-container" v-if="!checked">
<p>Text is visible</p>
</div>
</div>
我只是v-if="!checked"在內容 div 中替換
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/371634.html
標籤：javascript Vue.js
上一篇：訪問嵌套的api資料（vue）