vuejs,页面需要hide的div,在加载页面的时候先短暂的显示,然后hide

Question

我这个需求就是: 页面开始有几个div是要hide的, 我用v-show绑定到了vm上, 经过我的测试,在Vue的life cycle中,before compiled与compiled之间才会真正将div隐藏, 而之前所有div都是显示出来的, 给用户的感受就是页面闪了一下,不知道如何解决这个问题?
代码如下:
<div class="col-md-offset-6 col-md-3 col-xs-6" v-show="isShow[3]">
<div>
其中isShow是一个array,
isShow: [true, false,false] //加载页面第一个div show,其余hide
ps: 解决方案是不是只能用jquery操作dom来实现了?

Answer 1

v-cloak
然后加一个css 编译阶段hide掉就行。可以解决｛｛｝｝的闪烁问题。应该也能解决你这个问题

Answer 2

1.用<template>标签包裹模版 2.<div class="col-md-offset-6 col-md-3 col-xs-6" v-show="isShow[3]" style="display:none"><div>给标签加行间样式。 v-show会自动去掉