架构师

您现在的位置是:首页 > 程序人生 > 前端别闹

前端别闹

vue学习笔记:v-html语法

架构师小跟班 2020-06-03 前端别闹
v-html某些情况下,我们从服务器请求到的数据本身就是一个HTML代码。如果我们直接通过{{}}来输出,会将HTML代码也一起输出。但是我们可能希望的是按照HTML格式进行解析,并且显示

v-html

某些情况下,我们从服务器请求到的数据本身就是一个HTML代码。如果我们直接通过{{}}来输出,会将HTML代码也一起输出。但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容。

如果我们希望解析出HTML展示,可以使用v-html指令,该指令后面往往会跟上一个string类型,会将string的html解析出来并且进行渲染。

<div id="app" v-once>
  <h2>{{url}}</h2>
  <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>


文章评论