vue的那些插值操作

最新推荐文章于 2026-03-10 06:43:07 发布

原创最新推荐文章于 2026-03-10 06:43:07 发布 · 514 阅读

0 ·

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

收录于

菜鸟笔记

这篇笔记详细介绍了Vue的插值操作，包括mustache语法、v-once、v-html、v-pre和v-cloak指令。通过样例演示，展示了如何在DOM中插入变量值、富文本渲染、避免原始代码显示以及优化初始加载效果。

vue的那些插值操作

1.简介
2.什么是插值操作和mustache语法
3.插值操作总览表
4. 样例演示

1.简介

该笔记主要记录vue常用的插值操作和mustache操作，对这些插值操作做一些对比比较，方便参考使用。

2.什么是插值操作和mustache语法

将指定的值插入到指定的dom元素中，就叫做插值操作，比如将用户名写入一个指定的span中。
mustache语法：在vue中经常看到的{{varName}}这种形式的表达方式，就是mustache语法。（具体介绍请参考其他文章，这里不做详细描述）

3.插值操作总览表

计算语法	使用场景	注意事项
普通{{}}	显示简单的或者固定的值	尽量不要用于显示需要大量计算的值
v-once	当某一个值只需要显示初始状态值，并且不希望动态被修改的时候就可以使用该指令	v-once指令只需要写到指定的dom标签中即可，后面不带其他表达式
v-html	用于插入需要被浏览器渲染的html代码块	v-html指令写在dom标签中并且指定对应的变量值
被抛弃的v-text	v-text的作用和{{varName}}作用相同	因为v-text没有{{varName}}灵活，不能进行运算或拼接，所以一般不使用
v-pre	将标签中的内容原原本本的展示出来，主要用于展示代码块信息	参考html5的pre标签
v-cloak	用于处理在vue解析之前的时候做的事情	需要定义v-cloak相关的样式

4. 样例演示

4.1 插值操作之{{varName}}

这种直接使用mustache语法将某一个变量值插入到一个dom中的做法，就是最基本的插值操作。varName是data中的某一个已经存在的变量名(比较简单，这里就不做代码演示)。
此外，因为mustache语法中引用的是js的变量，所以在mustache表达式中，也可以做一些js一样的简单运算，比如：{{var1 + va2}} 就会按照js的方式进行计算并返回显示。

4.2 插值操作之v-once指令

说明信息见总览表，这给出一个演示代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <!-- 因为第二个h2的dom标签中使用了v-once标签，所以在console中改变msg值后，第二个h2中的值并不会改变  -->
        <h2 v-once>{{msg}}</h2>
    </div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: '这是初始信息'
        }
    })
</script>
</body>
</html>

4.3 插值操作之v-html指令

在很多项目中都会用到富文本编辑器，而富文本编辑器很多都是保存的html代码块。那么在页面中要展示这段已经编辑好的代码块，使用v-html会是一个不错的选择。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div id="content" v-html='htmlContent'></div>
    </div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            htmlContent: '<h2 style="color: #808080;">富文本中的标题</h2>'
        }
    })
</script>
</body>
</html>

4.4 插值操作之v-pre指令

1. v-pre会原封不动的展示标签中的内容，并不会解析。
2. 同v-once一样，v-pre也不需要参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2 v-pre>{{msg}}</h2>
    </div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: '这是初始信息'
        }
    })
</script>
</body>
</html>

4.5 插值操作之v-cloak指令

     有时候可能因为浏览器js解析的时候卡住了，就会导致浏览器中会显示出我们的原始代码，这样对用户不友好。所以使用v-cloak指令来完成一些js解析之前的事情，比如说隐藏没有渲染的dom。
     vue在渲染后会自动删除v-cloak指令
     实际开发中其实也很少使用，因为实际开发中基本都是组件化开发，组件会被封装成函数的形式，所以基本不会出现上述情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 v-cloak>{{msg}}</h2>
        
    </div>
<script>
/*
	为了能达到演示效果，所以在延迟一秒后才开始创建vue实例并解析，而在解析之前v-cloak指令被赋予了display: none的属性，所以在渲染之前在浏览器中看不到h2中的内容。
	而在vue渲染后，v-cloak指令被删除，h2就会显示出来，但是因为渲染工作已经完成，所以浏览器上就看不到代码模样了。想要看到代码在页面中显示的样子，只需要删除v-cloak后刷新页面即可，或者修改style中的样式信息。
*/
    setTimeout(function(){
        const app = new Vue({
            el: '#app',
            data: {
                msg: '这是延迟显示的内容'
            }
        })
    },1000)
</script>
</body>
</html>