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

相关推荐
绺年几秒前
模块化加载机制与循环依赖的探索
前端
Csvn9 分钟前
前端技术 - 前端技术债务
前端
Days205019 分钟前
Flyfish Viewer:全能纯前端多格式文件预览组件,解锁浏览器端无门槛预览新体验
前端
selfsuer20 分钟前
【奇奇怪怪前端问题记录】
前端
不要额外加糖23 分钟前
给 Codex 戴上紧箍, 治一治 AI 的过度发挥
前端·人工智能·代码规范
卤蛋fg644 分钟前
给 vxe-table 设置全局默认参数:setConfig、setIcon 与 setTheme
vue.js
文心快码BaiduComate44 分钟前
Comate搭载MiniMax M3:支持超长百万上下文
前端·人工智能·后端
浩风祭月44 分钟前
React 18 并发特性实战:用 useTransition 和 useDeferredValue 优化列表搜索体验
前端·react native
WebInfra1 小时前
TanStack Start 框架正式支持 Rsbuild
前端·javascript·前端框架