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

相关推荐
问心无愧05132 分钟前
ctf show web入门261
android·前端·笔记
触底反弹4 分钟前
你真的理解 JavaScript 变量提升(Hoisting)吗?从 V8 引擎编译原理深入剖析
前端·面试
蜡台16 分钟前
Vue2 使用 typescript 教程
前端·vue.js·typescript
光影少年29 分钟前
Redux Toolkit 用法、解决原生Redux 冗余问题
开发语言·前端·javascript·react.js·中间件·前端框架·ecmascript
云水一下36 分钟前
JavaScript 从零基础到精通系列:DOM 操作与事件驱动编程
前端·javascript
ZC跨境爬虫1 小时前
跟着 MDN 学CSS day_32:(Web字体深度解析与实践指南)
前端·javascript·css·ui·html
砍材农夫1 小时前
物联网 基于netty核心实战-安全tls
java·开发语言·前端·物联网·安全
SEO_juper1 小时前
JavaScript 渲染:AI 智能体无法读取,直接影响收录
开发语言·前端·javascript·aigc·seo·跨境电商·geo
i220818 Faiz Ul1 小时前
在线预约导游|基于SSM+vue的在线预约导游系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设·在线预约导游系统