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

相关推荐
卤蛋fg611 分钟前
vue表格组件 vxe-table 鼠标滑动表头选择整列与选择整行的配置详解
vue.js
TomEval31 分钟前
【Web UI 自动化】05 - KDT 模式原理与实现
前端·ui·自动化
南雨北斗40 分钟前
vue3项目状态持久化方案Pinia
前端
计算机魔术师1 小时前
Uber 工程师不动手,Agent 接管了 70% 的代码 PR
前端
南雨北斗1 小时前
Vue3项目中使用Pinia代替TP6 session传递
前端
律宏阔1 小时前
Electron 打包 CloakBrowser:解决客户电脑缺少浏览器二进制的问题
前端
এ慕ོ冬℘゜1 小时前
jQuery 核心方法
前端·javascript·jquery
阳火锅1 小时前
老板要周报?我说不用,代码提交就是进度
前端·javascript·vue.js
chjif1 小时前
一张照片和一段声音如何生成口播视频:MiniMax H3 音画同步实测
java·前端·javascript