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

相关推荐
微三云、小叶7 分钟前
排队免单系统底层设计:四种分配算法拆解,无预支资金的合规营销架构方案
java·前端·软件开发·商业模式·本地生活·商业思维
copyer_xyf14 分钟前
Python 内存分析:从栈和堆理解对象引用
前端·后端·python
whatever who cares28 分钟前
大型 React 项目的文件结构
前端·react.js·前端框架
AI_零食31 分钟前
健身室器材管理系统鸿蒙PC Electron框架编写深度解析
前端·javascript·学习·华为·electron·前端框架·鸿蒙
ZC跨境爬虫1 小时前
跟着 MDN 学 JavaScript day_2:JavaScript 初体验
开发语言·前端·javascript·学习·ecmascript
假如让我当三天老蒯1 小时前
useCallback 详细解释(从原理到用法)(自学用)
前端·react.js
a1117762 小时前
粒子化系统(3D-Particles)THreeJS react
前端·html·jetson
码农君莫笑2 小时前
深入理解 CSS Grid 布局:从入门到实战
前端·css
yingyima2 小时前
Azure Functions 定时触发器配置:Cron vs. TimerTrigger,谁主沉浮?
前端