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>
This is my I think it will be helpful for you.
Here is my code.
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>
Question and answer is powered by AnsPress.io