Vue中v-text和v-html指令的区别

最新推荐文章于 2022-02-22 14:36:54 发布

永远热爱夏天的风

最新推荐文章于 2022-02-22 14:36:54 发布

阅读量682

点赞数

分类专栏：日常学习日常分享总结记录

本文链接：https://blog.csdn.net/pillow233/article/details/100888079

版权

日常学习同时被 3 个专栏收录

55 篇文章 1 订阅

订阅专栏

日常分享

22 篇文章 1 订阅

订阅专栏

总结记录

19 篇文章 0 订阅

订阅专栏

Vue中v-text和v-html指令的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    <div v-text="msg"></div>
</div>
<script>
    new Vue
    ({
        el: "#root",
        data: {
            msg: "<h1>hello</h1>"
        }
    })
</script>
</body>
</html>

v-text的运行结果（h1进行了转义）：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    <div v-html="msg"></div>

</div>

<script>
    new Vue
    ({
        el: "#root",
        data: {
            msg: "<h1>hello</h1>"
        }
    })
</script>
</body>
</html>

v-html运行结果：
在这里插入图片描述

永远热爱夏天的风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中v-text和v-html指令的区别

Vue中v-text和v-html指令的区别<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue入门</title> <script src="vue.js"></script>&l...
复制链接

扫一扫

专栏目录