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

相关推荐
暴力袋鼠哥16 分钟前
基于 Spring Boot 3 + Vue 3 的农产品在线销售平台设计与实现
vue.js·spring boot·后端
chilavert31843 分钟前
技术演进中的开发沉思-371:final 关键字(中)
java·前端·数据库
2301_8169978844 分钟前
Vite构建工具
前端
yuki_uix2 小时前
深入理解 reduce:从面试题到设计思维
前端
凌云拓界2 小时前
TypeWell全攻略(二):热力图渲染引擎,让键盘发光
前端·后端·python·计算机外设·交互·pyqt·数据可视化
coding随想2 小时前
TypeScript 高级类型全攻略:从“可表达性”到“类型体操”的实践之路
前端·javascript·typescript
大时光2 小时前
gsap -滚动插件 ScrollTrigger 简单demo
前端
tangbin5830852 小时前
iOS Swift:蓝牙 BLE 连接外设CoreBluetooth
前端