今天小编给大家分享的是v-once、v-pre 、v-cloak三个指令的用法。小编觉得挺实用的，为此分享给大家做个参考。一起跟随小编过来看看吧。

v-once
当你只希望元素加载一次后面不再改变的时候，这个时候可以在根元素上添加这个指令。确保这些内容不会跟着数据改变而改变，只在初次页面加载时候计算一次然后缓存起来，v-once后面不用跟表达式

<div id="app"> <img v-once :src="url" > <button @click="change">换图片</button> </div> <script type="text/javascript"> const app = new Vue({ el:"#app", data:{ url:"https://cache.yisu.com/upload/information/20200302/54/8699.jpg" }, methods:{ change(){ this.url = "https://cache.yisu.com/upload/information/20200302/54/8700.jpg" } } }) </script>

v-pre
一些静态的内容不需要编译加上这个指令可以加快编译，程序执行的时候就会跳过这个元素和它的子元素的编译过程。v-pre后面也不用跟表达式

<h2 v-pre>哈哈哈哈哈哈哈</h2>

v-cloak
这个其实是用在网络比较差 程序执行慢或卡的时候，浏览器可能会显示出如下页面

<div id="app"> <div> <h2>{{count}}</h2> <h2>{{count}}</h2> <h2>{{count}}</h2> <h2>{{count}}</h2> <h2>{{count}}</h2> </div> </div>

此时，模板还未挂载到页面上，真实数据还没显示出来，看起来比较丑，那怎么办 ，要不就找一个斗篷先遮住吧，等到模板挂载上去数据正常显示了，再把斗篷扔了。v-cloak后面也不用跟表达式

cloak 英[kləʊk] 美[kloʊk]
n. (尤指旧时的) 披风，斗篷; 遮盖物;

<style type="text/css"> [v-cloak]{ display: none; } </style> </head> <body> <div id="app"> <div v-cloak> <h2>{{count}}</h2> <h2>{{count}}</h2> <h2>{{count}}</h2> <h2>{{count}}</h2> <h2>{{count}}</h2> </div> </div> <script type="text/javascript"> setTimeout(function(){ const app = new Vue({ el: "#app", data: { count: "1111" }, methods: { } }) },3000) </script> </body>


看完上述内容，你们对v-once、v-pre 、v-cloak三个指令的用法大概了解了吗？如果想了解更多相关文章内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！