3.数据填充相关三个指令_那个指令和的作用个插值功能类似-CSDN博客

本文链接：https://blog.csdn.net/code_dream_wq/article/details/110137043

本文介绍了Vue的三个指令。v-text用于将数据填充到标签，无闪动问题，是单向绑定；v-html可将HTML片段填充到标签，但有安全风险，与v-text区别在于会解析HTML标签；v-pre能显示原始信息，跳过编译过程，可加快静态内容渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-text

- v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
- 如果数据中有HTML标签会将html标签一并输出
- 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

v-html

- 用法和v-text 相似但是他可以将HTML片段填充到标签中

- 可能有安全问题, 一般只在可信任内容上使用 `v-html`，**永不**用在用户提交的内容上

- 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

v-pre

- 显示原始信息跳过编译过程
- 跳过这个元素和它的子元素的编译过程。
- **一些静态的内容不需要编译加这个指令可以加快渲染**

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div><!--   没定义v-pre，msg这里显示Hello Vue  -->
    <div v-text='msg'></div> <!-- 作用于插值表达式类似，但是没有闪动问题 -->
    <div v-html='msg1'></div><!-- 会将其当html标签解析后输出 -->
	<!--   用了v-pre，即使data里面定义了msg这里仍然是显示的{{msg}}  -->
    <div v-pre>{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
      2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题
      3、v-pre用于显示原始信息
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        msg1: '<h1>HTML</h1>'
      }
    });
  </script>
</body>
</html>