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

相关推荐
mapbar_front25 分钟前
顺利通过试用期:避开三大陷阱,掌握三个关键点
前端·面试
韩立学长35 分钟前
【开题答辩实录分享】以《智慧校园勤工俭学信息管理系统的设计与实现》为例进行答辩实录分享
vue.js·spring boot·微信小程序
why技术44 分钟前
1K+Star的开源项目能给一个在校大学生带来什么?
前端·人工智能·后端
@PHARAOH44 分钟前
HOW - localstorage 超时管理方案
前端·javascript·vue.js
im_AMBER1 小时前
React 05
开发语言·前端·javascript·笔记·学习·react.js·前端框架
showker1 小时前
ecstore等产品开启缓存-后台及前台不能登录原因-setcookie+session问题
java·linux·前端
DokiDoki之父1 小时前
前端速通—Vue_简介 & 第一个Vue程序 & el:挂载点 & data:数据对象 & Vue指令
javascript·vue.js·ecmascript
csj502 小时前
前端基础之《React(4)—webpack简介-编译打包优化》
前端·react
万少3 小时前
Trae AI 编辑器6大使用规则
前端·javascript·人工智能
好玩的Matlab(NCEPU)3 小时前
如何编写 Chrome 插件(Chrome Extension)
前端·chrome