讲解v-cloak、v-text和v-html作用

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

学习没有捷径，如果有那便是持之以恒

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

阅读量425

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/wulianlang6162/article/details/98357060

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

v-cloak

使用v-cloak能解决插值表达式闪烁问题

v-tex
v-text=“msg” 相当于{{msg}}，但v-text会覆盖元素中原本的内容
v-html
v-html会解析html内容

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习 v-cloak v-test v-html</title>
    <!--//导入js包-->
    <script src="js/vue.js"></script>
</head>
<body>
<style>
    [v-cloak] {
        display: none;
    }

</style>
<div id="app">
    <!--使用v-cloak能解决插值表达式闪烁问题-->
    <p v-cloak>---{{msg}}</p>
    <!--默认v-text是没有闪烁问题的-->
    <!--v-text会覆盖元素中原本的内容-->
    <h1 v-text="msg">222</h1>
    <!-- v-html会解析html内容-->
  <h2 v-html="msg2"></h2>

</div>
</body>
<script>
    new Vue(
        {
            el: '#app',
            data: {
                msg: "123",
                msg2:'<h1>我是msg2</h1>'

            }
        }
    )

</script>
</html>

学习没有捷径，如果有那便是持之以恒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
讲解v-cloak、v-text和v-html作用

直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>学习 v-cloak v-test v-html</title>  <script src="j...
复制链接

扫一扫