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

相关推荐
光影少年10 分钟前
前端如何虚拟列表优化?
前端·react native·react.js
Moment12 分钟前
一杯茶时间带你基于 Yjs 和 reactflow 构建协同流程图编辑器 😍😍😍
前端·后端·面试
invicinble29 分钟前
对于前端数据的生命周期的认识
前端
PieroPc33 分钟前
用FastAPI 后端 和 HTML/CSS/JavaScript 前端写一个博客系统 例
前端·html·fastapi
名字越长技术越强35 分钟前
html\css\js(一)
javascript·css·html
hunter145039 分钟前
2026.1.4 html简单制作
java·前端·笔记·html
鹏程十八少40 分钟前
Android 深入剖析Android内存泄漏:ViewPager2与Fragment的生命周期陷阱
android·前端·app
李少兄40 分钟前
深入理解 CSS opacity 属性
前端·css
幺零九零零41 分钟前
前端测试·1
前端
1024小神43 分钟前
uniapp项目中使用vue3和小程序组件父子通信
前端·小程序·uni-app