vue3常见指令介绍

Vue3 中的指令和 Vue2 中的指令在使用方式上有些不同。下面是一个简单的 Vue3 指令教程：

1. v-if 和 v-show：在 Vue3 中，v-if 和 v-show 的使用方式和 Vue2 中基本相同，用于根据条件显示或隐藏元素。

<div v-if="isShow">显示内容</div>
<div v-show="isShow">显示内容</div>

1. v-for：在 Vue3 中，v-for 指令可以用在普通的元素上，也可以用在模板中的多个元素上。

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

1. v-on：在 Vue3 中，v-on 指令可以用 @ 简写，监听事件并执行对应的方法。

<button @click="handleClick">点击按钮</button>

1. v-model：在 Vue3 中，v-model 仅支持双向绑定输入框的值，其他表单元素需要自行处理。

<input type="text" v-model="inputValue">

1. v-bind：在 Vue3 中，v-bind 指令可以用 : 简写，用于动态绑定元素的属性。

<img :src="imageUrl">

除了以上常用的指令外，Vue3 还提供了一些新的指令，如：

• v-model 可以在自定义组件上使用
• v-suspense 用于处理异步组件加载时的状态
• v-slot 用于传递内容给组件的插槽

以上是一些 Vue3 中常用的指令和一些新的指令，希望对您有所帮助。