Vue学习总结（五）——插值操作

最新推荐文章于 2025-04-19 16:58:30 发布

原创最新推荐文章于 2025-04-19 16:58:30 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

Vue学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了Vue中的六种插值操作，包括Mustache语法、v-once指令用于一次性渲染、v-html指令用于解析HTML内容、v-text指令用于显示文本、v-pre指令跳过编译过程以及v-cloak指令防止未编译模板的闪烁。

1、Mustache语法（也就是双大括号，Mustache：胡子、胡须）

（1）可以直接插入到标签中

（2）可以写简单的表达式

（3）可以两个mustache一起使

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <!--插入到标签中-->
    <h2>{{message}}</h2>
    <h2>{{message}}, 李银河</h2>
    <!--mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
    <h2>{{firstName + lastName}}</h2>
    <h2>{{firstName + ' ' + lastName}}</h2>
    <h2>{{counter * 5}}</h2>
    <!--使用了两个mustache-->
    <h2>{{firstName}} {{lastName}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        firstName: 'kim',
        lastName: 'tian',
        counter: 100
      }
    })
  </script>
</body>
</html>

2、v-once指令

（1）使用场景：

当我们不希望界面随意的跟随改变时，可以用该指令

（2）用法：

该指令后面不需要跟任何表达式。

该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  </script>
</body>
</html>

尝试打开console修改message的值，使用v-once后没用重新渲染，值不会被改变。

3、v-html指令

（1）使用场景：

某些情况下，我们从服务器请求到的数据本身就是一个HTML代码。

如果我们直接通过{{}}来输出，会将HTML代码也一起输出。

但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。

（2）用法：

该指令后面往往会跟上一个String类型。

会将string的html解析出来并进行渲染。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <h2>{{url}}</h2>
    <!--v-html指令后面往往会跟上一个string类型，会将string的html解析出来并进行渲染-->
    <h2 v-html="url"></h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        url: '<a href="http://www.baidu.com">百度一下</a>'
      }
    })
  </script>
</body>
</html>

执行结果如下：

4、v-text指令

（1）使用场景：

和mustache比较相似，都是用于将数据显示在页面上。

（2）用法：

v-text通常情况下，接受一个String类型。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <h2>{{message}},田小江</h2>
    <!--v-text不够灵活,会将后面的值覆盖掉-->
    <h2 v-text="message">,田小江</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  </script>
</body>
</html>

执行结果如下：可以看出来v-text会覆盖后面的内容。

5、v-pre指令

（1）使用场景：

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <!--这个元素中的内容会被编译解析出来对应的内容-->
    <h2>{{message}}</h2>
    <!--加上v-pre，会把里面的东西原封不动的展示出来，不要做解析-->
    <h2 v-pre>{{message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  </script>
</body>
</html>

执行结果如下：

6、v-cloak指令

（1）使用场景

这个指令保持在元素上直到关联实例结束编译。

即：

在vue解析之前，div中有一个属性v-cloak

在vue解析之后，div中没有一个属性v-cloak

（2）用法

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
  <!--在vue解析之前，div中有一个属性v-cloak-->
  <!--在vue解析之后，div中没有一个属性v-cloak-->
  <div id="app" v-cloak>
    <h2>{{message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    setTimeout(function() {
      const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
    }, 3000)
  </script>
</body>
</html>

执行结果为：在前3秒是空白，后面展示你好啊。

如果不使用v-cloak和对应的CSS规则，显示效果为：在前3秒为{{message}}，后面显示你好啊。