uni-app 的指令 (directive) 有哪些？

推荐答案

uni-app 的指令 (directive) 主要包括以下几种：

1. v-bind：用于动态绑定属性。
2. v-on：用于绑定事件监听器。
3. v-model：用于在表单控件或组件上创建双向数据绑定。
4. v-if、v-else-if、v-else：用于条件渲染。
5. v-show：用于根据条件显示或隐藏元素。
6. v-for：用于列表渲染。
7. v-text：用于更新元素的 textContent。
8. v-html：用于更新元素的 innerHTML。
9. v-pre：用于跳过该元素及其子元素的编译过程。
10. v-cloak：用于在 Vue 实例编译完成前隐藏未编译的 Mustache 标签。
11. v-once：用于只渲染元素和组件一次。

本题详细解读

v-bind

v-bind 指令用于动态绑定 HTML 属性。例如，你可以将一个变量绑定到 src 属性上：

<img v-bind:src="imageSrc">

v-on

v-on 指令用于绑定事件监听器。例如，你可以监听按钮的点击事件：

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

v-model

v-model 指令用于在表单控件或组件上创建双向数据绑定。例如，你可以将输入框的值与一个变量绑定：

<input v-model="message">

v-if、v-else-if、v-else

这些指令用于条件渲染。例如，你可以根据条件显示不同的内容：

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>

v-show

v-show 指令用于根据条件显示或隐藏元素。与 v-if 不同，v-show 只是切换元素的 display 属性：

<div v-show="isVisible">Visible</div>

v-for

v-for 指令用于列表渲染。例如，你可以遍历一个数组并渲染列表项：

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

v-text

v-text 指令用于更新元素的 textContent。例如，你可以将一个变量的值插入到元素中：

<span v-text="message"></span>

v-html

v-html 指令用于更新元素的 innerHTML。例如，你可以将一个 HTML 字符串插入到元素中：

<div v-html="htmlContent"></div>

v-pre

v-pre 指令用于跳过该元素及其子元素的编译过程。例如，你可以保留原始的 Mustache 标签：

<div v-pre>{{ this will not be compiled }}</div>

v-cloak

v-cloak 指令用于在 Vue 实例编译完成前隐藏未编译的 Mustache 标签。通常与 CSS 一起使用：

<div v-cloak>{{ message }}</div>

[v-cloak] {
  display: none;
}

v-once

v-once 指令用于只渲染元素和组件一次。例如，你可以确保某个元素只渲染一次：

<span v-once>{{ message }}</span>