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

相关推荐
Spider_Man9 分钟前
JavaScript对象那些坑:初学者必踩的“陷阱”与进阶秘籍
前端·javascript
海螺先生31 分钟前
Cursor 高阶使用指南:AI 辅助开发的深度整合
前端
我在北京coding32 分钟前
Uncaught ReferenceError: process is not defined
前端·javascript·vue.js
Hilaku33 分钟前
我为什么觉得 React 正在逐渐失去吸引力?
前端·react.js·前端框架
用户527096487449035 分钟前
🎨 Stylelint:让你的 CSS 代码优雅如诗
前端
日升35 分钟前
AI 组件库-MateChat 组件大全与主题定制
前端·ai编程·trae
龚思凯38 分钟前
TypeScript 中 typeof 的全面解析:从基础用法到高级技巧
前端·typescript
itslife40 分钟前
实现 render 函数 - 初始化更新队列
前端·react.js·前端框架
baozj41 分钟前
一次表单数据复用引发的 Bug:理解 Vue 中的 data 为何是函数
前端·javascript·vue.js
LRH43 分钟前
JS基础 - instanceof 理解及手写
前端·javascript