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后:跳转到了新的标签页百度

相关推荐
程序员黑豆15 分钟前
Java入门第一步:从零开始编写你的第一个Hello World程序
java·前端·ai编程
凌涘15 分钟前
前端路由(二):React Router 组件化路由实战
前端
鸽鸽1 小时前
别急着装第三方库,这些事浏览器原生就能做到——Web Native API 实战指南
前端
做前端的娜娜子1 小时前
从 0 到 1 打造一个配置可视化后台:一次前端配置中心化改造的实战复盘
前端·设计模式·数据可视化
南雨北斗1 小时前
vue3 RouterLink链接颜色修改的方法
前端
Richard.Wong1 小时前
Windows IIS 服务器部署 Vue3 前端项目详细流程
服务器·前端·windows
数据知道1 小时前
XSS 攻防全解:反射型、存储型、DOM 型实战演示
前端·安全·web安全·网络安全·xss
Nemo_XP1 小时前
C# gridlookupedit选中内容重复还原操作
服务器·前端·c#
大家的林语冰1 小时前
🎉 Vercel 官宣 Next 16.3 正式发布,GitHub 第一全栈框架再次进化!
前端·javascript·前端框架
不爱说话郭德纲2 小时前
我只给了 TRAE Work 一张差评截图,它最后却把自己的 P0 结论推翻了?
前端·后端·架构