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>

页面效果:

相关推荐
MartinYeung521 分钟前
[论文学习]AgentSafetyBench:大语言模型智能体安全评估基准深度分析
学习·安全·语言模型
猫猫不是喵喵.22 分钟前
Vue2 的 Vuex 状态管理与 Vue3 的 Pinia 状态管理
前端·javascript·vue.js
艾莉丝努力练剑2 小时前
【Linux:动静态库】Linux 动静态库与可执行文件
linux·运维·服务器·学习·面试·文件系统·动静态库
软件技术NINI2 小时前
盗墓笔记html+css+js 2页
css·笔记·html
宁风NF2 小时前
JavaScript:内存、垃圾回收、性能优化
开发语言·前端·javascript·学习·性能优化·es6
编程圈子3 小时前
电机驱动开发学习22. 霍尔电角度标定(自动/手动标定与Flash固化)
驱动开发·学习
ShuiShenHuoLe3 小时前
Go html/template 使用入门
开发语言·golang·html
Zzj_tju3 小时前
如何设计一个小而可靠的 Follow-up Idea:从论文局限到可执行选题
人工智能·学习·语言模型·自然语言处理
午安~婉3 小时前
挑战二:博客预览卡片
前端·javascript·html
m4Rk_3 小时前
【论文阅读】Agent 记忆机制(26):Infini Memory——将长期记忆维护成可读写的主题文档
论文阅读·人工智能·学习·开源·github