Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vuejs show

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

Show and hide an element with v-show. Given an html element, add the v-show property and link it to a variable.

The variable can be defined in the data section of the vue app.

Vue.js show/hide element

The example below shows and hide an element using v-show.
We add a function named showhide() to change the variable state.
Without such a button, the variable would remain the same value.

The output will look simple as:
vuejs show element

A div will either show or hide when the button is clicked.

Complete code:

<!DOCTYPE html>
<html class="" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src='//cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script>
<meta charset="UTF-8">
<style>
.detail {
background: yellow;
width: 35%;
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>

<div id="app">
<div>
Yada. Read more:
</div>
<button v-on:click="showhide">Show/Hide</button>

<div v-show="collapsed" class="detail">
yada yada yada yada yada yada

yada yada yada yada yada yada

yada yada yada yada yada yada

</div>

</div>

<script>var app = new Vue({

el: "#app",
data: {
collapsed: false
},
methods: {
showhide: function() {
if (!this.collapsed)
this.collapsed = true;
else
this.collapsed = false;
}
}
});
</script>
</body>
</html>


© vuejsexamples.net - Privacy Policy - Cookie Policy