Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vuejs if

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

Show data with an if statement?

Vue.js supports if statements.
If the value of a variable is true, it will be shown. Otherwise, it will be invisible.

v-if example

First define a variable in your Vue app:

new Vue({
el: '#app',
data: {
show: true
}
});

Then we add this variable to a div using v-if:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>//vuejsexamples.net</title>
<!-- include vue -->
<script src="//unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<div v-if="show">
The variable show is set to
</div>
</div>
</body>
<script src="app.js"></script>
</html>

If you want to show a div when a variable is set to false, use this instead:

<div v-if="!show">

Note: the exclamation mark (!) negates the case.

Download Vue.js Examples


← Vue.js for vuejs model →

Posts


© vuejsexamples.net - Privacy Policy - Cookie Policy