Skip to content

Instantly share code, notes, and snippets.

@Ravaelles

Ravaelles/gist:1aa9275d6a38a00d9eef4b34efe280bd

Created August 8, 2018 16:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Ravaelles/1aa9275d6a38a00d9eef4b34efe280bd to your computer and use it in GitHub Desktop.
Save Ravaelles/1aa9275d6a38a00d9eef4b34efe280bd to your computer and use it in GitHub Desktop.
Download ZIP
Vue.js checkbox controlling div visibility
Raw
gistfile1.txt
<html>
<head>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div id="">
<input type="checkbox" id="toggleMe" v-on:click="toggleClick">
<label for="toggleMe">Toggle me {{ message }}</label>
</div>
<div id="section" v-if="visible">
Ha! Visible now!
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
visible: false
},
methods: {
toggleClick: function() {
this.visible = ! this.visible;
},
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment