Vue指令v-html

慕斯-ing

已于 2025-06-22 21:23:49 修改

阅读量765

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Vue2.x 文章标签： vue.js 前端经验分享

于 2025-02-03 20:27:59 首次发布

本文链接：https://blog.csdn.net/blbyu/article/details/145432872

Vue2.x 专栏收录该内容

23 篇文章

订阅专栏

一、Vue中的v-html指令是什么？

v-html指令的作用是：设置元素的innerHTML，内容中有html结构会被解析为标签。

二、v-html指令与v-text指令的区别？

v-text指令是无论内容是什么都只会将其解析为文本，解析文本使用v-text和v-html的效果一样，但当需要解析html结构时要使用v-html。

1、案例源代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <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="appid">
    <!-- 解析文本使用v-text和v-html的效果一样，但当需要解析html结构时要使用v-html。 -->
    1、解析文本示例
    <p v-text = "school"></p>    
    <p v-html = "school"></p> 
    <br>
    2、解析html结构示例
    <p v-text = "href"></p>    
    <p v-html = "href"></p> 
  </div>
  <script>
    var app = new Vue({
      el: '#appid',
      data: {
        school: "振华中学",
        href: "<a href='https://blog.csdn.net/blbyu/article/details/145413252'>CSDN-Vue简介</a>"
      }
    })
  </script>
</body>

</html>