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>

页面效果:

相关推荐
gnip1 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
王王碎冰冰8 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼9 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
我是日安9 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
DevUI团队10 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好10 小时前
pinia从定义到运用
前端·vue.js
代码小学僧10 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
东坡白菜11 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
猩兵哥哥14 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
EMT15 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js