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

相关推荐
悟空瞎说3 分钟前
Git 协作工作流详解:从个人单打独斗到规模化团队协同
前端·git
颜进强6 分钟前
20-Spec-Kit Tasks 是怎么把技术方案拆成可执行任务的?
前端·后端·ai编程
程序员鱼皮6 分钟前
Cursor 零基础实战教程,夯爆了!带你速通 6 大核心能力
前端·后端·ai编程
颜进强7 分钟前
14-Spec-Kit、SDD 和 OpenSpec 到底有什么区别?其实核心思想都一样:先写清楚,再让 AI 干活
前端·后端·ai编程
颜进强7 分钟前
16-Spec-Kit 是什么?先从整体流程机制讲起
前端·后端·ai编程
悟空瞎说10 分钟前
QML 集成 WebView 开发桌面内嵌浏览器实战
前端
八目蛛11 分钟前
八目蛛网络(免费工具网站导航)
css·vue.js·开源·vue3·html5·ai编程
前端与小赵25 分钟前
快速生成安卓证书并打包生成安卓apk(保姆教程)
android·前端
Cxiaomu30 分钟前
MentorPi A1 底盘接入开发实践:让自研Web系统接管机器人底盘
前端·机器人
程序员海军1 小时前
沪漂五周年了:我越来越迷茫了
前端·人工智能·后端