溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享的是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三個指令的用法大概了解了嗎？如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
