02 v-cloak v-text v-html

最新推荐文章于 2022-04-12 21:43:37 发布

Civitasv

最新推荐文章于 2022-04-12 21:43:37 发布

阅读量118

点赞数

分类专栏： Vue 文章标签： vue html 前端框架

本文链接：https://blog.csdn.net/qq_40996400/article/details/104139073

版权

Vue 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

v-cloak

<html>
  <head>
      <meta charset="utf-8"></meta>
      <title>v-cloak</title>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
      <div id="app">
          {{msg}}
      </div>
      <script>
        var vm = new Vue({
            el: "#app", 
            data:{
                msg:"123"   
            }
        })
        </script>
  </body>
</html>

在网速正常的时候，上述代码会迅速出现123这个值，但也能看到由{{msg}}向123转变的过程，在网速缓慢的时候更为明显。

解决插值表达式的上述问题就需要用到v-cloak属性。

<style>
     [v-cloak]{
         display: none;
     }
</style>
<div id="app">
     <p v-cloak>{{msg}}</p>
</div>

将上述代码添加到html文件即可解决闪烁问题。

v-text

v-text可以获取Vue对象中data的内容。在上述例子的基础上，添加：

<h4 v-text="msg"></h4>

即可获取到msg的值。

那么它与插值表达式{{}}有什么区别和联系呢？

v-text无闪烁问题
具有v-text属性的dom元素中的内容不会显示到页面上，如：
```
 <h4 v-text="msg">----</h4>
```
其中的----不会出现在页面上，会被覆盖，但插值表达式的前后可以添加其他的值，不会覆盖。
v-text和插值表达式不能解析html语句

v-html

上文说到v-text和插值表达式无法解析html语句，所以v-html出现了。

<p v-html="msg2"></p>
var vm = new Vue({
            el: "#app", 
            data:{
                msg:"123",
                msg2:"<h1>ss</h1>"
            }
})