Vue的HTML插入——v-html指令

有时我们希望将数据作为HTML代码插入到HTML模板中,而不是以纯文本的形式显示。在这种情况下,我们需要使用Vue.js的v-html指令:

html 复制代码
<template>
  <div>
    <p>纯文本: {{ rawText }}</p>
    <p>属性: <span v-html="rawHtml"></span></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawText: "这是一段纯文本",
      rawHtml: "<a href='https://baidu.com'> baidu </a>"
    };
  }
};
</script>

点击baidu后:跳转到了新的标签页百度

相关推荐
用户6331077612366几秒前
Who is a Promise?
前端
用户7851278147014 分钟前
从 0 到 1 落地淘宝商品 API 开发:手把手教你采集、分析与避坑(含完整可运行代码)
vue.js
比老马还六35 分钟前
Blockly元组积木开发
前端
笨笨狗吞噬者39 分钟前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
西洼工作室1 小时前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
xier1234561 小时前
高性能和高灵活度的react表格组件
前端
你打不到我呢1 小时前
nestjs入门:上手数据库与prisma
前端
多啦C梦a1 小时前
React 实战:从 setInterval 到 useInterval,一次搞懂定时器 Hook(还能暂停!)
前端·javascript·react.js
闲不住的李先森1 小时前
乐观更新
前端·react.js·设计模式
笔尖的记忆1 小时前
【前端架构和框架】react组件化&数据流
前端·面试