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

相关推荐
南知意-14 小时前
3.3K Star ! 超级好用开源大屏设计器!
前端·开源·开源项目·工具·大屏设计
华仔啊14 小时前
Vue 组件通信的 8 种最佳实践,你知道几种?
前端·vue.js
Ahtacca14 小时前
Linux环境下前后端分离项目(Spring Boot + Vue)手动部署全流程指南
linux·运维·服务器·vue.js·spring boot·笔记
用户44455436542615 小时前
Android依赖的统一管理
前端
国家二级编程爱好者15 小时前
Android Lottie使用,如何自定义LottieView?
android·前端
南囝coding15 小时前
《独立开发者精选工具》第 025 期
前端·后端
@淡 定15 小时前
Dubbo + Nacos 完整示例项目
前端·chrome·dubbo
毕设源码-邱学长15 小时前
【开题答辩全过程】以 基于web的博客论坛系统的设计与实现为例,包含答辩的问题和答案
前端
就叫曲奇饼干吧15 小时前
前端面试题整理(方便自己看的)
前端·面试