本文主要是介绍Vue指令:v-cloak、v-once、v-pre 指令,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
1、v-cloak 指令
v-cloak 指令可以隐藏未编译的 Mustache 标签直到实例准备完毕,否则在渲染页面时,有可能用户会先看到 Mustache 标签,然后看到编译后的数据。
(1)设置CSS样式 display:none
<style type="text/css">[v-cloak] {display: none !important;}
</style>
(2)使用 v-cloak 指令,指令格式:
<p v-cloak>{{message}}</p>
【实例】使用 v-cloak 指令,解决Vue使用双大括号标签绑定数据时,因页面加载延时而产生的闪烁问题。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="author" content="pan_junbiao的博客"><title>v-cloak 指令</title><!-- 设置样式 --><style type="text/css">[v-cloak] {display: none !important;}</style>
</head><body><div id="app"><p v-cloak>{{blogName}}</p><p v-cloak>{{blogUrl}}</p></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">//使用延时2秒方式,模拟页面的加载延时setTimeout(() => {//创建一个Vue应用程序实例const vueApp = Vue.createApp({//数据data() {return {blogName: "您好,欢迎访问 pan_junbiao的博客",blogUrl: "https://blog.csdn.net/pan_junbiao"}}}).mount('#app');}, 2000);
</script></html>
执行结果:
2、v-once 指令
使用 Vue 指令绑定数据时,如果只需要渲染一次数据,则可以使用 v-once 指令单次插值。单次插值即只执行一次插值,在第一次插入文本后,当数据对象中的属性值发生改变时,插入的文本将不会更新。
指令格式:
<p v-once>{{message}}</p>
3、v-pre 指令
如果想要像是 {{ }} 标签,而不是进行替换,可以使用 v-pre 指令,通过该指令可以跳过该元素和其子元素的编译过程。
指令格式:
<p v-pre>{{message}}</p>
【实例】使用 v-pre 指令。
<body><div id="app"><h3>{{title}}</h3><p v-pre>{{blogName}}</p><p v-pre>{{blogUrl}}</p></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp = Vue.createApp({//数据data() {return {title: "使用 v-pre 指令",blogName: "您好,欢迎访问 pan_junbiao的博客",blogUrl: "https://blog.csdn.net/pan_junbiao"}}//使用 mount() 方法,装载应用程序实例的根组件}).mount('#app');
</script>
执行结果:
这篇关于Vue指令:v-cloak、v-once、v-pre 指令的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!