Vue 模板的功臣 · 指令

最新推荐文章于 2025-07-30 20:45:34 发布

原创最新推荐文章于 2025-07-30 20:45:34 发布 · 189 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文全面介绍了Vue框架中各种指令的应用，包括v-if、v-else-if、v-else的条件渲染，v-for的循环渲染，v-show的显示隐藏，v-once的单次更新，v-html的HTML字符串渲染，v-model的双向绑定，v-text的文字显示，v-bind的属性绑定，以及v-on的事件监听。这些指令使Vue模板更加灵活高效。

Vue 模板中，「指令」犹如一条命令，让 Vue 干啥就干啥，Vue 总是哈腰点头，为模板服务着。

1、v-if、v-else-if、v-else ，活要挑着干

某个 HTML 元素要在指定的条件下才能渲染，v-if、v-else-if 需要指定一个条件，这个条件是一个表达式或者是计算属性，但是不能是过滤器，只有在 truthy 的时候才会渲染。

在 JavaScript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真(true)的值。所有值都是真值，除非它们被定义为假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）

Vue虚拟实验室 · @ivan

<body>
    <div id="app">
        <!-- <div v-if="state | showState">下载状态：{{ state }}</div> -->
        <div v-if="state === 0">下载</div>
        <div v-else-if="state === 1">正在下载</div>
        <div v-else-if="state === 2">已下载</div>
        <div v-else="state === 3">下载失败</div>
        <!-- 计算属性 -->
        <div v-if="invalid">下载状态异常</div>
    </div>
    <script>
        const obj = {
            el: '#app',
            data: function () {
                return {
                    title: '前端小课',
                    state: 5
                }
            },
            computed: {
                invalid() {
                    return this.state < 0 || this.state > 3;
                }
            },
            filters: {
                showState(state) {
                    return !(this.state < 0 || this.state > 3);
                }
            }
        }
        const vm = new Vue(obj);
</script>
</body>

2、遇到重复劳动，聪明点，要想到 v-for

即可渲染数组，也可渲染对象。在数组渲染中有一个 key，可以避免元素复用时数据错误。

<body>
    <div id="app">
        <!-- 数组 -->
        <p v-for="(title, index) in list" :key="index">{{ title }}</p>
        <!-- 对象 -->
        <p v-for="(v, k, i) in me">{{ i }} - {{ k }}: {{ v }}</p>
    </div>
<script>
        const obj = {
            el: '#app',
            data: function () {
                return {
                    list: ['前端小课','Vue 虚拟实验室','素燕'],
                    me: {
                        fe: '前端小课',
                        vue: 'Vue 虚拟实验室',
                        name: '素燕'
                    }
                }
            }
        }
        const vm = new Vue(obj);
</script>
</body>

3、显示隐藏一把好手 v-show

图来自 vue.js 官方：

4、一次就够 v-once

title 变化不会引起 div 元素内容的改变。

<!-- v-once 只更新一次 -->
<div v-once>{{ title }}</div>

5、我想显示 HTML， v-html

有时候想把 HTML 字符串当做普通的字符串，而有时候却想让 HTML 字符串直接渲染，咋么办？

<!-- html 会被当做普通的问题 -->
<p>{{ rawHtml }}</p>
<!-- html 会被解析 -->
<span v-html="rawHtml"></span>

<script>
    const obj = {
        el: '#app',
        data: function () {
            return {
                rawHtml: '<span style="color:red">我是 HTML</span>'
            }
        }
    }
    const vm = new Vue(obj);
</script>

6、彼此含情脉脉，形影不离 v-model

双向绑定离不开 v-model，比如输入框输入文字，并实时显示到屏幕上。下面的例子来自：「Vue虚拟实验室 · @两块牛排」。

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>


<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
})
</script>

7、要显示啥交给我，v-text

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

8、你要是想动，请告诉我 v-bind

如果想给 HTML 元素动态绑定属性，需要通过 v-bind 指令来实现。比如这节内容让 Class 与 Style 动起来提到的 :class，:style，其实使用的都是 v-bind 指令，如果想动态修改 HTML 元素属性，请使用 v-bind 指令。

<a v-bind:href="link">前端小课</a>
// 也可以使用缩写：
<a :href="link">前端小课</a>

9、最近发生了大事，赶快听听 v-on

v-on 主要负责监听事件，事件发生后可以调用 methods 中定义的方法。可以监听到哪些事件呢？通常 HTMLElement 所支持的事件，都能够监听，比如 touchstart、onscroll、load 等事件。如果想阻止事件冒泡，可以使用指令的修饰符。

<div v-on:click="clickMe">点击</div>
// 也可以缩写
<div @click="clickMe">点击</div>

总结

本文概括性地说明了各个指令的使用。这些指令都是 Vue 框架自身提供的，其实也可以自定义 Vue 指令。

大家加油！

推荐阅读：

动静结合 · Vue 模板
 让 Class 与 Style 动起来