v-cloak消除页面闪动
实时更新时间的代码:
<div id="app"><h1>Time: {{ date|formatDate }}</h1></div>
<script>
var padDate = function (value) {
return value < 10 ? '0'+value : value;
}
var app = new Vue({
el: '#app',
data: {
date: new Date()
},
mounted: function () {
var _this = this;
this.timer = setInterval(function () {
_this.date = new Date();
}, 1000);
},
beforeDestory: function () {
if (this.timer) {
clearInterval(this.timer);
}
},
filters: {
formatDate: function (value) {
var date = new Date(value);
var year = date.getFullYear();
var month = padDate(date.getMonth() + 1);
var day = padDate(date.getDate());
var hours = padDate(date.getHours());
var minutes = padDate(date.getMinutes());
var seconds = padDate(date.getSeconds());
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}
}
});
由于加载页面后Vue.js往往还没加载完,因此可能导致页面一开始会出现如下的字样(即页面没来得及被渲染完成):
随后Vue.js加载完成,上图被渲染完成而跳闪为下图的日期:
可以在div属性中加上v-cloak并设置样式:
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak><h1>Time: {{ date|formatDate }}</h1></div>
如此设置,在未加载Vue.js时凡是含有v-cloak属性的元素是不可见的。
Vue.js加载完成后v-cloak属性会被自动移除,元素也就显示出来了(此时已经完成了渲染)。