Vue指令v-html

目录

• 一、Vue中的v-html指令是什么？
• 二、v-html指令与v-text指令的区别？

一、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>

2、代码执行效果如下：