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

相关推荐
白鲸开源17 分钟前
Apache SeaTunnel Zeta Engine 的 Basic Auth 是怎么工作的?
java·vue.js·github
妙码生花19 分钟前
从 PHP 到 AI + Golang,程序员自救转型手记(八):设计管理员模型、热重载配置
前端·后端·go
卤蛋fg623 分钟前
vue 甘特图 vxe-gantt 的使用(四):周视图的渲染
vue.js
政采云技术24 分钟前
Chrome 高阶调试技巧
前端
牧艺24 分钟前
HTML-in-Canvas 深度解析:让 Canvas 真正「吃上」HTML 这碗饭
前端·html·canvas
卤蛋fg626 分钟前
vue 甘特图 vxe-gantt 的使用(三):月视图的渲染
vue.js
秦瑜华30 分钟前
前端页面添加AI自动翻译按钮
前端·openai·ai编程
沉浸学习的匿名网友38 分钟前
什么是 .gitignore?为什么每个 Git 项目几乎都离不开它?
前端·git
Apifox1 小时前
从 Postman 迁移到 Apifox:Workspace、Collection、Environment 现在可以一起导入了
前端·后端·程序员
cidy_982 小时前
Agent\-Reach 保姆级教程|AI Agent 全网数据源扩展工具(免费无调用费)
前端