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>

页面效果:

相关推荐
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
码荼8 小时前
学习开发之hashmap
java·python·学习·哈希算法·个人开发·小白学开发·不花钱不花时间crud
武昌库里写JAVA9 小时前
Oracle如何使用序列 Oracle序列使用教程
java·开发语言·spring boot·学习·课程设计
祁思妙想9 小时前
八股学习(三)---MySQL
数据库·学习·mysql
我在北京coding10 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
Eiceblue10 小时前
使用 C# 发送电子邮件(支持普通文本、HTML 和附件)
开发语言·c#·html·visual studio
amazinging10 小时前
北京-4年功能测试2年空窗-报培训班学测开-第四十一天
python·学习·appium