Vue.js 指令详解：v-bind, v-html, v-once, v-on, v-if, v-else-if, v-else 和 v-model

Vue.js 是一个用于构建用户界面的渐进式框架，它通过一系列的指令来实现数据与 DOM 的绑定。在本篇博客中，我们将通过一个示例来介绍 Vue 3 中的一些常用指令：v-bind, v-html, v-once, v-on, v-if, v-else-if, v-else 和 v-model。

1. v-bind：动态地绑定一个或多个属性

v-bind 指令用于动态地绑定一个组件 prop 或一个组件 attribute 到表达式。它的简写是 :。

<h1 :id="id1">这里是模板的内容:<span v-html="cunntHTML"></span>次单击</h1>

在这个例子中，id1 的值将被绑定到 h1 标签的 id 属性上。

2. v-html：将 HTML 字符串渲染为真实的 HTML 内容

v-html 指令用于将绑定值作为 HTML 内容渲染。

<span v-html="cunntHTML"></span>

这里，cunntHTML 中的 HTML 标签将被解析并显示为红色文本。

3. v-once：只绑定一次数据

v-once 指令用于进行一次性地插值。当数据变化时，插值处的内容不会更新。

<h1 :id="id1" v-once>Hello, World</h1>

4. v-on：监听 DOM 事件

v-on 指令用于在元素上监听 DOM 事件。它的简写是 @。

<button @click="clickButton">按钮</button>

这里，当按钮被点击时，clickButton 方法将被调用。

5. v-if：条件性地渲染一块内容

v-if 指令用于根据表达式的真假条件渲染一块内容。

<div v-if="show"><hi>show</hi></div>

如果 show 的值为 true，则显示 div 内的内容。

6. v-else-if 和 v-else：`v-if` 的“else if”和“else”块

<h1 v-if="mark==100">满分</h1>
<h1 v-else-if="mark>=60">及格</h1>
<h1 v-else>不及格</h1>

这里，根据 mark 的值，将显示不同的 h1 标签内容。

7. v-model：在表单控件元素上创建双向数据绑定

v-model 指令在表单控件元素上创建双向数据绑定。

<div><input v-model.trim="content"></div>

这里，content 的值将与输入框的值同步，并且 trim 修饰符会移除输入的首尾空格。

完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js 指令示例</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application" style="text-align: center;">
    <h1 :id="id1">这里是模板的内容:<span v-html="cunntHTML"></span>次单击</h1>
    <h1 :id="id1">这里是模板的内容:{{ count + 10 }}次单击</h1>
    <h1 :id="id1" v-once>Hello, World</h1>
    <button @click="clickButton">按钮</button>
    <div v-if="show"><hi>show</hi></div>
    <div><input v-model.trim="content"></div>
    <div>
        <h1 v-if="mark==100">满分</h1>
        <h1 v-else-if="mark>=60">及格</h1>
        <h1 v-else>不及格</h1>
    </div>
</div>
<script>
    const App = {
        data() {
            return {
                count: 0,
                cunntHTML: '<span style="color: red;">0</span>',
                id1: "h1",
                show: true,
                mark: 30,
                content: ''
            }
        },
        methods: {
            clickButton() {
                this.count++;
            }
        }
    };
    Vue.createApp(App).mount("#Application");
</script>
</body>
</html>

结论

Vue.js 的指令为开发者提供了一种声明式的方法来处理数据和 DOM 的交互。通过本篇博客的示例，我们了解了如何使用 v-bind, v-html, v-once, v-on, v-if, v-else-if, v-else 和 v-model 这些指令来构建动态和交互式的用户界面。Vue 的这些指令不仅使得代码更加简洁，而且提高了开发效率。