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

相关推荐
Ulyanov3 分钟前
三维战场可视化核心原理(一):从坐标系到运动控制的全景指南
开发语言·前端·python·pyvista·gui开发
天若有情67310 分钟前
从语法拆分到用户感知:我的前端认知重构之路
前端·javascript
_OP_CHEN13 分钟前
【前端开发之CSS】(五)CSS 盒模型深度解析:从基础到实战,掌控页面布局核心
前端·css·html·盒模型·页面开发·页面布局·页面美化
0思必得014 分钟前
[Web自动化] 爬虫基础
运维·爬虫·python·selenium·自动化·html
轩情吖18 分钟前
Qt多元素控件之QListWidget
开发语言·前端·c++·qt·控件·qlistwidget·桌面级
Yaru1119 分钟前
伪3D地图和3D饼图实现
前端·3d·echarts
测试_AI_一辰22 分钟前
Agent & RAG 测试工程 02:RAG 从最小闭环到可信
开发语言·前端·人工智能·github·ai编程
_xaboy32 分钟前
开源Vue组件-动态表单组件设计,告别重复CRUD,JSON一键生成表单
前端·vue.js·低代码·开源·json
Access开发易登软件38 分钟前
Access 连接 SQL Server:直通查询 vs 链接表 vs ADO,如何选择?
前端·数据库·vba·access·access开发
HWL567944 分钟前
Vue Router中,传递参数的几种方式
前端·javascript·vue.js