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

相关推荐
XiaoYu200214 小时前
第11章 LangChain
前端·javascript·langchain
霉运全滚蛋好运围着转14 小时前
启动 Taro 4 项目报错:Error: The specified module could not be found.
前端
cxxcode14 小时前
前端模块化发展
前端
不务正业的前端学徒14 小时前
docker+nginx部署
前端
不务正业的前端学徒14 小时前
webpack/vite配置
前端
hhcccchh15 小时前
学习vue第八天 Vue3 模板语法和内置指令 - 简单入门
前端·vue.js·学习
yyf1989052515 小时前
Vue 框架相关中文文献
前端·javascript·vue.js
粥里有勺糖15 小时前
开发一个美观的 VitePress 图片预览插件
前端·vue.js·vitepress
陟上青云15 小时前
一篇文章带你搞懂原型和原型链
前端
我的写法有点潮15 小时前
推荐几个国外比较流行的UI库(上)
前端·javascript·css