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>

页面效果:

相关推荐
高级程序源19 分钟前
django大学生创新创业项目管理系统94923-计算机课程设计、毕业设计
javascript·vue.js·spring boot·后端·python·django·课程设计
2601_9499506328 分钟前
练题簿在线练题全流程:从资料导入到模拟考试与错题复盘
学习·考研·小程序·刷题·小程序推荐
别动我齐刘海1 小时前
ROS2 Jazzy + C++ 实战路线——基础学习2
c++·人工智能·vscode·python·学习·机器学习·机器人
志尊宝3 小时前
Vue3 零基础每日笔记(040):Vite 创建 Vue3 + TS 项目——企业标配从这一篇开始
笔记·vue·html·前端开发·软件开发
水云桐程序员3 小时前
量子力学概论,量子力学概念总结
笔记·科技·学习·量子计算
前端·柱子3 小时前
q-floodfill白边锯齿?一招搞定抗锯齿边缘问题
前端·html·canva可画
VXbishe4 小时前
【课程设计】基于SpringBoot的乡村政务服务系统的设计与实现-计算机毕设77011
javascript·vue.js·spring boot·python·php·课程设计·政务
志尊宝4 小时前
Vue3 零基础每日笔记(037):动手封装 useMouse 与 useWindowSize——事件监听的标准模板
前端·javascript·vue.js·笔记·html5
三克的油4 小时前
java-学习1
java·开发语言·学习
BillKu4 小时前
vue3双向邦定:使用defineModel替换defineProps+defineEmits
vue.js