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

相关推荐
じòぴé南冸じょうげん8 小时前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
会豪8 小时前
Electron主进程渲染进程如何优雅的进行通信
前端
jianghaha20118 小时前
前端 Word 模板参入特定数据 并且下载
前端·word
跟橙姐学代码8 小时前
轻松搞定 Python 模块与包导入:新手也能秒懂的入门指南
前端·python·ipython
aiwery8 小时前
大模型场景下的推送技术选型:轮询 vs WebSocket vs SSE
前端·agent
会豪8 小时前
前端插件-不固定高度的DIV如何增加transition
前端
却尘8 小时前
Server Actions 深度剖析(2):缓存管理与重新验证,如何用一行代码干掉整个客户端状态层
前端·客户端·next.js
小菜全8 小时前
Vue 3 + TypeScript 事件触发与数据绑定方法
前端·javascript·vue.js
Hilaku8 小时前
面试官开始问我AI了,前端的危机真的来了吗?
前端·javascript·面试
shellvon9 小时前
前端攻防:揭秘 Chrome DevTools 与反调试的博弈
前端·逆向