Vue入门-指令学习-v-html

v-html:

作用:设置元素的innerHTML,动态解析标签

语法:v-html="表达式"

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
</head>
<body>
    <div id="app">
        <div v-html="msg"></div>
    </div>

    <script src="js/vue.js"></script>

    <script>
        const app = new Vue({
            //通过el配置选择器,指定Vue管理的是哪个盒子
            el:'#app',
            //通过data提供数据
            data: {
       msg: '<a href="https://www.baidu.com">百度</a>'
   }

        })
    </script>
</body>
</html>

页面效果:

相关推荐
我有满天星辰17 小时前
【那些年踩过的坑-前端篇- Mac版本】Mac 从零搭建 Node 环境:nvm + Node + Vue 实战(避坑终极版)
前端·vue.js·macos
weixin_4280053018 小时前
C#调用 AI学习从0开始-第2阶段(Function Calling+工具调用智能体)-第8天Function Calling原理
人工智能·学习·c#·functioncalling
仰望.18 小时前
vxe-table 导出 Excel 进阶教程:自定义样式与高级功能
前端·javascript·vue.js·excel·vxe-table·vxe-ui
我叫张土豆18 小时前
从 0 到 1 搭一个可用的 Vue Flow 工作流编排器(含下载/加载/自动布局)
前端·javascript·vue.js
Lucky_ldy18 小时前
51单片机的学习上(结合中科协的个人自用笔记)
嵌入式硬件·学习·51单片机
ZC跨境爬虫18 小时前
跟着 MDN 学CSS day_24:(CSS调试完全指南)
前端·css·ui·html·tensorflow
颖火虫盟主18 小时前
Lua 协程:从 API 到底层原理再到 Skynet 架构的完整学习路径
学习·架构·lua
段一凡-华北理工大学18 小时前
工业领域的Hadoop架构学习~系列文章01:Hadoop与工业4.0深度融合
大数据·hadoop·学习·架构·知识图谱·高炉炼铁·工业智能体
千寻girling18 小时前
机器学习 | 监督学习算法(了解) | 尚硅谷学习
开发语言·人工智能·后端·python·学习·算法·机器学习
red_redemption18 小时前
自由学习记录(195)
学习