Template Syntax

Directives connect templates to state

Text interpolation {{ expr }} renders a JavaScript expression as text (HTML is escaped). Directives are special attributes starting with v-: v-bind:href (shorthand :href) binds an attribute to an expression, v-on:click (shorthand @click) attaches an event listener, with modifiers such as .prevent and .stop. v-if / v-else-if / v-else add or remove elements, while v-show keeps the element and toggles CSS display, which is cheaper for frequent toggling. v-for="item in items" renders a list and should always have a unique :key so Vue can track each item when the list changes. Avoid v-if and v-for on the same element; wrap with a <template> instead.

The common directives together

A small todo list.

<script setup>
import { ref } from 'vue'

const todos = ref([
  { id: 1, text: 'Learn templates', done: true },
  { id: 2, text: 'Learn reactivity', done: false },
])
const showDone = ref(true)
const docsUrl = 'https://vuejs.org'
</script>

<template>
  <a :href="docsUrl" target="_blank">Docs</a>
  <button @click="showDone = !showDone">Toggle done</button>

  <ul>
    <template v-for="todo in todos" :key="todo.id">
      <li v-if="showDone || !todo.done">{{ todo.text }}</li>
    </template>
  </ul>
  <p v-show="todos.length === 0">Nothing to do</p>
</template>

Do not use the index as a key for changing lists

If items can be reordered, inserted or removed, an index key makes Vue reuse the wrong DOM nodes and component state. Use a stable id from your data.

त्वरित जाँच: What is the difference between v-if and v-show?

• v-if only works on components
• They are identical aliases
• v-show removes the element from the DOM
• v-if adds or removes the element; v-show only toggles its CSS display