vue(v-cloak)怎样明显的看出变化

当new Vue()还没有被创建的时候 ，一直刷新浏览器会若隐若现的显示div里面会显示框框，因为还没有解析，或者有些电脑就完全不显示边框(我的就是这种),如何解决才能看到 v-cloak的功能

 <style> 
        [v-cloak]{
            display: none;
        }
      </style> 


 <div id="app" v-cloak >
             {{message}}
            </div>
            <script>
               setTimeout(function(){
                var app = new Vue({
                    el:'#app',
                    data:{
                        message:'hello'
                    }
                })
               },1000)
            </script>

直接给new Vue（）加一个一次性定时器，延迟他的创建，v-cloak这个功能，就能完美的展现出来

再介绍一下 v-bind: 缩写 :
把对象封装到方法里面return出去

 <div id="app" v-cloak >
              <h2 :class="{color1:zt1,color2:zt2}">你好</h2>
              //<h2 :class=ff()>你好</h2>
              <button @click="myhs">点击</button>
            </div>
            <script>
                var app = new Vue({
                    el:'#app',
                    data:{
                    zt1:true,
                    zt2:false

                    },
                    methods: {
                        myhs:function(){
                            this.zt2=!this.zt2
                        },
                        ff:function(){
                            return {color1:this.zt1,color2:this.zt2}
                        }
                    }
                })
            </script>