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

相关推荐
一入程序无退路3 分钟前
若依框架导出显示中文,而不是数字
java·服务器·前端
m0_626535205 分钟前
代码分析 关于看图像是否包括损坏
java·前端·javascript
wangbing11256 分钟前
layer.open打开的jsf页面刷新问题
前端
Mintopia7 分钟前
🌏 父子组件 i18n(国际化)架构设计方案
前端·架构·前端工程化
WebGISer_白茶乌龙桃7 分钟前
前端又要凉了吗
前端·javascript·vue.js·js
小飞侠在吗8 分钟前
vue2 watch 和vue3 watch 的区别
前端·javascript·vue.js
计算机学姐10 分钟前
基于Python的新能源汽车数据可视化及分析系统【2026最新】
vue.js·python·信息可视化·django·flask·汽车·推荐算法
脾气有点小暴11 分钟前
Vue3 中 ref 与 reactive 的深度解析与对比
前端·javascript·vue.js
拾忆,想起14 分钟前
Dubbo异步调用与主线程同步完全指南:告别阻塞,掌控并发
前端·微服务·架构·dubbo·safari