Vue v-html 指令

Vue.js v-html 指令用于设置标签的 innerHTML。

我们通过 v-text 或者 {{}} 插值的方式设置文本的内容，Vue 会将数据解释为纯文本，而非原始的 HTML。也就是会把数据中包含的 HTML 标签进行转义。

为了输出原始的 HTML，你需要使用 v-html 指令。

 

1. v-html 指令

v-html 指令会输出原始的 HTML 内容，不会把数据中包含的 HTML 标签进行转义：

<div v-html="rawHtml"></div>

被插入的内容都会被当做 HTML —— 数据绑定会被忽略。

<html>
<head>
    <title>编程宝库 Vue教程</title>
</head>
<body>
    <div id="app"> 
      <p v-html="message"></p> 
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el:'#app',	
          data:{
            message:'加粗显示：<strong>Hello,World!</strong>'
        }
      })
    </script>
</body>
</html>

运行后，输出加粗显示的文本内容。

我要试一试

 

2. 注意问题

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。请只对可信内容使用 HTML 插值，**绝不要**对用户提供的内容插值。

3. Vue 视频教程

视频地址：https://www.bilibili.com/video/BV12J411m7MG?p=8&share_source=copy_web

Vue.js v-on 指令用于为元素绑定事件的处理方法。比如处理鼠标事件、键盘事件等。1. v-on 指令：v-on 指令用户监听 DOM 事件，并在触发时运行一些 JavaScript 代码。v-on 语法：v-on:event="javascipt"。