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

相关推荐
被考核重击5 分钟前
【无标题】
前端·javascript·vue.js
RJiazhen9 分钟前
论前端第三方库的技术选型 —— 以 Jodit Editor 为例
前端·前端工程化
用户81686947472511 分钟前
React 如何用 MessageChannel 模拟 requestIdleCallback
前端·react.js
izx88812 分钟前
从 Buffer 到响应式流:Vue3 实现 AI 流式输出的完整实践
javascript·vue.js·人工智能
heyCHEEMS13 分钟前
手搓 uniapp vue3 虚拟列表遇到的坑
前端
Duck不必14 分钟前
紧急插播:CVSS 10.0 满分漏洞!你的 Next.js 项目可能正在裸奔
前端·next.js
+VX:Fegn089514 分钟前
计算机毕业设计|基于springboot + vue在线考试管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
幸运小圣15 分钟前
动态组件【vue3实战详解】
前端·javascript·vue.js·typescript
用户4130798106115 分钟前
终于不漏了-Android开发内存泄漏详解
前端
孟祥_成都16 分钟前
nest.js / hono.js 一起学!hono的设计思想!
前端·node.js