Basics of Directives in Vue.js

Seann Branchfield
Sep 10, 2019 · 1 min read

In Vue, you can attach commands to DOM elements, known as directives. Sometimes they are connected to attributes like v-bind. Since these typically refer to our data, if you do not know what that is, feel free to read my article Beginning Intro to Vue.js.

v-bind

In order to link data to an attribute, you can use v-bind. This links the data to the element. Let’s say we have a profile picture:

<img v-bind:src=”profilePic” />

profilePic refers to our data:

v-if and v-else

In order to conditionally render a DOM element, you can use v-if.

<div v-if=”somethingTrue”>Hello World</div>

If in our data, somethingTrue is true, then the div will be rendered. Right now if somethingTrue was false, nothing would be rendered, but we can also use v-else to render something when somethingTrue is false.

<div v-if=”somethingTrue”>Hello World</div>

<div v-else=”somethingTrue”>Hello Moon</div>

If we want to deal with more than two conditions, we can also use v-else-if.

JavaScript in Plain English

Learn the web's most important programming language.

Seann Branchfield

Written by

Full Stack Web Developer and Musician

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade