这三个指令都是用来优化性能体验的:一个是搞一次不搞了 ,一个是干脆不搞 ,另一个是块遮羞布
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:"/tupian/20230521/8699.jpg"
},
methods:{
change(){
this.url = "/tupian/20230521/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-oncev-prev-cloak作用-创新互联
转载注明:https://www.cdcxhl.com/article40/cssoeo.html
成都网站建设公司_创新互联,为您提供外贸网站建设、云服务器、微信小程序、商城网站、网站营销、搜索引擎优化
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联