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

相关推荐
南风知我意9576 小时前
【前端面试3】初中级难度
前端·javascript·面试
霍理迪6 小时前
JS作用域与预解析
开发语言·前端·javascript
切糕师学AI6 小时前
.NET Core Web 中的健康检查端点(Health Check Endpoint)
前端·kubernetes·.netcore
东东5166 小时前
校园求职招聘系统设计和实现 springboot +vue
java·vue.js·spring boot·求职招聘·毕设
rosmis6 小时前
地铁病害检测系统软件改进记录-2-02
开发语言·前端·javascript
css趣多多6 小时前
解决ui组件flex1容器底部被撑开的问题
前端
乔江seven7 小时前
【python轻量级Web框架 Flask 】2 构建稳健 API:集成 MySQL 参数化查询与 DBUtils 连接池
前端·python·mysql·flask·web
Alaaaaaaan7 小时前
[DevOps]使用github-action工具部署docker容器(实现提交代码一键推送部署到服务器)
服务器·前端·docker·容器·github
摇滚侠7 小时前
css 设置边框
前端·css
星爷AG I7 小时前
9-24 视觉叙事(AGI基础理论)
前端·人工智能