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>He alternado usando un método como check=!checkedd pero aún no puedo ocultar el contenido.
Inicialmente, la casilla de verificación y el contenido del texto deben estar visibles. Entonces, una vez que el usuario hizo clic en la casilla de verificación, el contenido estará oculto.
No se requieren varias variables para manejar esta lógica.
Simplemente puede guardar la variable 'marcada', y es un enlace bidireccional, cuando la casilla de verificación está marcada, será verdadero.
Aquí está mi código.
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>la propiedad de data debe ser función:
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>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> Acabo de reemplazar v-if="!checked" en la división de contenido