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

相关推荐
LeeAt6 分钟前
手搓一个 Ollama 本地 SSE 全栈聊天助手
前端
全_6 分钟前
全栈项目实践五:抽离npm包
前端
dorisrv7 分钟前
使用requestIdleCallback和requestAnimationFrame优化前端性能
前端
dorisrv7 分钟前
CSS Grid + Flexbox响应式复杂布局实现
前端
前端灵派派7 分钟前
openlayer选择移动图标
前端
重铸码农荣光7 分钟前
深入理解 JavaScript 继承:从原型链到 call/apply 的灵活运用
前端·javascript·面试
禅思院8 分钟前
vite项目hmr热更新问题
前端·vue.js·架构
dorisrv10 分钟前
TRAE SOLO 正式版:AI全链路开发的新范式 🚀
前端·trae
小明记账簿_微信小程序11 分钟前
antd v3 select自定义下拉框内容失去焦点时会关闭下拉框
前端
前端老宋Running11 分钟前
告别“祖传”defineProperty!Vue 3 靠 Proxy 练就了什么“神功”?
前端·vue.js·面试