Vue3 Directives

Vue directives are a core feature of Vue.js. They can be used in HTML templates asv-special attributes starting with v-, used to bind reactive data to DOM elements or to perform operations on DOM elements.

Vue directives are prefixed withv-special HTML attributes, which give HTML tags extra functionality.

Compared with traditional JavaScript methods, using Vue to create reactive pages is much easier and requires less code.

The following are several commonly used Vue directives:

DirectiveDescription
v-bind Used to bind the data of a Vue instance to the attributes of HTML elements.
v-if Used to conditionally render elements or components based on the value of an expression.
v-show v-show is a directive provided by Vue.js to conditionally show or hide an element based on the value of an expression.
v-for Used to render elements or components in a loop based on the values of an array or object's properties.
v-on Used to bind event listeners to HTML elements so they can trigger methods or functions in the Vue instance.
v-model Used to create two-way data binding between form controls and Vue instance data.

In addition to these commonly used directives, Vue also provides some other directives, such as v-text, v-html, etc., as well as custom directives, allowing developers to manipulate DOM elements more flexibly.

Example

The following are some examples of using Vue directives:

Usingv-modeldirective to implement two-way data binding for form data:

Example

<div id="app" class="demo">
    <input type="text" v-model="message">
    <p>{{ message }}</p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

Try it Yourself »

Usingv-binddirective to bind the data of a Vue instance to the attributes of HTML elements:

Example

<div id="app" class="demo">
    <img v-bind:src="imageSrc">
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      imageSrc: '/static.jyshare.com/images/code-icon-script.png?v=2'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

Try it Yourself »

Usingv-ifandv-elsedirective to conditionally render elements or components based on the value of an expression:

Example

<div id="app" class="demo">
    <p v-if="showMessage">Hello Vue!</p>
    <p v-else>Goodbye Vue!</p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      showMessage: true
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

Try it Yourself »

Usingv-fordirective to render elements or components in a loop according to the property values of an array:

Example

<div id="app" class="demo">
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

Try it Yourself »

Use the v-on directive to bind event listeners to HTML elements:

Example

<div id="app">
  <div id="lightDiv">
    <div v-show="lightOn"></div>
    <img src="/static.jyshare.com/images/svg/img_lightBulb.svg?v=2">
  </div>
  <button v-on:click=" lightOn =! lightOn ">On/Off</button>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      lightOn: false
    }
  }
})
app.mount('#app')
</script>

Try it Yourself »

The following is an example usingv-showdirective:

Example

<div id="hello-vue" class="demo">
    <button v-on:click="showMessage = !showMessage">Show/Hide</button>
    <p v-show="showMessage">Hello Vue!</p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      showMessage: true
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

Try it Yourself »
Other Extensions