Vue 3的模板指令可以用于在模板中添加动态行为，包括条件渲染、循环渲染、属性绑定等。以下是Vue 3的常用模板指令及示例代码：

v-if / v-else-if / v-else

v-if指令用于条件渲染，根据表达式的真假值来决定是否渲染某个元素。v-else-if和v-else指令则可以用于在v-if指令的基础上添加更多条件分支。

<template>
  <div>
    <div v-if="isShow">Hello World</div>
    <div v-else-if="isLoading">Loading...</div>
    <div v-else>Nothing to show</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      isLoading: false
    }
  }
}
</script>

在上面的示例中，根据isShow和isLoading的值来渲染不同的元素。

v-for

v-for指令用于循环渲染，根据指定的数据数组或对象来渲染每个元素。

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['apple', 'banana', 'orange']
    }
  }
}
</script>

在上面的示例中，根据items数组循环渲染每个元素，并使用:key绑定每个元素的唯一标识。

v-bind

v-bind指令用于动态地绑定HTML元素的属性或组件的props属性。

<template>
  <div>
    <img v-bind:src="imageUrl" alt="">
    <MyComponent v-bind:prop1="value1" :prop2="value2" />
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
      value1: 'foo',
      value2: 'bar'
    }
  },
  components: {
    MyComponent
  }
}
</script>

在上面的示例中，根据imageUrl、value1和value2的值动态地绑定img元素的src属性和MyComponent组件的prop1和prop2属性。

v-on

v-on指令用于绑定DOM事件处理程序。

<template>
  <button v-on:click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('button clicked')
    }
  }
}
</script>

在上面的示例中，当按钮被点击时会调用handleClick方法。