以下是 Vue 3 中常用的几个指令：
1. v-bind
v-bind 用于动态绑定一个或多个属性。它接受一个表达式，该表达式的结果将动态地绑定到目标属性上。
<!-- 动态绑定 href 属性 -->
<a v-bind:href="url">Visit my website</a>
2. v-model
v-model 用于在表单元素上创建双向数据绑定。它会将表单元素的值与 Vue 实例的数据进行双向绑定。
<!-- 双向绑定 input 的值到 message -->
<input v-model="message">
3. v-for
v-for 用于循环渲染一组数据。可以使用它来遍历数组或对象，并为每个项渲染相应的内容。
<!-- 遍历数组 -->
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
<!-- 遍历对象 -->
<ul>
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
</ul>
4. v-if, v-else-if, v-else
v-if 用于条件性地渲染一块内容。v-else-if 和 v-else 可以用于添加额外的条件分支。
<!-- 根据条件渲染不同的内容 -->
<div v-if="isTrue">This is true</div>
<div v-else-if="isFalse">This is false</div>
<div v-else>This is neither true nor false</div>
5. v-show
v-show 用于根据条件展示或隐藏元素，通过 CSS 的 display 属性来切换。
<!-- 根据条件显示或隐藏元素 -->
<div v-show="isVisible">This may be visible or hidden</div>
6. v-on
v-on 用于监听 DOM 事件，并在触发时执行相应的方法。
<!-- 监听点击事件 -->
<button v-on:click="handleClick">Click me</button>
7. v-pre
v-pre 跳过这个元素和所有子元素的编译过程。可以用来优化性能。
<!-- 不编译该元素及其子元素 -->
<div v-pre>{{ message }}</div>
这只是一些 Vue 3 中常用的指令，Vue 还有其他一些指令和自定义指令，可以根据具体的需求去查阅[官方文档](https://v3.vuejs.org/guide/directives.html)。指令是 Vue 框架中非常强大和灵活的特性之一，能够帮助你更方便地操作 DOM 和处理用户交互。
转载请注明出处：http://www.zyzy.cn/article/detail/12975/Vue3