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

相关推荐
G***E31626 分钟前
前端GraphQLAPI
前端
lumi.27 分钟前
Vue + Element Plus 实现AI文档解析与问答功能(含详细注释+核心逻辑解析)
前端·javascript·vue.js·人工智能
z***I39429 分钟前
VueGraphQLAPI
前端
S***t7142 小时前
Vue面试经验
javascript·vue.js·面试
粉末的沉淀2 小时前
css:制作带边框的气泡框
前端·javascript·css
N***73854 小时前
Vue网络编程详解
前端·javascript·vue.js
e***71674 小时前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
程序猿小蒜4 小时前
基于springboot的的学生干部管理系统开发与设计
java·前端·spring boot·后端·spring
银空飞羽4 小时前
让Trae CN SOLO自主发挥,看看能做出一个什么样的项目
前端·人工智能·trae
Eshine、5 小时前
解决前端项目中,浏览器无法正常加载带.gz名称的文件
前端·vue3·.gz·.gz名称的js文件无法被加载