v-cloak,v-text,v-html的简单区分

最新推荐文章于 2023-09-20 21:24:37 发布

篆愁君的烦恼

最新推荐文章于 2023-09-20 21:24:37 发布

阅读量166

点赞数

分类专栏： Vue 文章标签：前端 vue.js html

本文链接：https://blog.csdn.net/m0_52228992/article/details/124134813

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中的三个重要指令：v-cloak用于解决页面加载时的数据延迟问题，确保元素在数据未加载时保持隐藏状态；v-text用于设置元素的文本内容，它会覆盖原有内容；v-html则用于设置元素的HTML内容，能够解析并显示HTML片段。通过示例代码展示了它们的使用方法及效果，强调了v-cloak在优化用户体验上的作用。

摘要由CSDN通过智能技术生成

v-cloak：解决由于网速过慢或其他问题导致的加载不出数据问题，一般与css属性连用，使得，当该属性未加载时处于不可见的形式，css属性设为display：none；

v-text:将该指令所在的元素内容改为文本，文本内容是v-text后的文本，一般设置为可变，在vue中的data定义，不存在加载不出的问题；

v-html:将该指令所在的元素内容改为html元素，内容是v-html后的HTML语句，同v-text，一般设为可变，并存放在data中，不存在加载不出的问题。

一个简单例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  [v-cloak]{
    display: none;
  }
</style>
<body>
<div id="app">
  <!--v-cloak可以解决由于网速过慢或其他问题导致的加载不出数据问题-->
  <p v-cloak>============{{msg}}===========</p>
  <p v-html="mssg">============{{msg}}===========</p>
  <p v-text="mssg">============{{msg}}===========</p>
</div>
<script src="../js/vue.js" type="text/javascript"></script>
<script>
  var Myvue=new Vue({
    el: "#app",
    data: {
      msg: "message",
      mssg:"<h1>标题</h1>"
    }
  });

</script>
</body>
</html>

运行结果：