Vue中v-show和v-if的使用以及区别

个人博客 地址:http://www.wenhaofan.com/article/20190321143330

v-if

    1.v-if 根据条件渲染，它会确保在切换过程中条件块内的组件销毁和重建
          
    2. v-if如果在初始渲染时条件为假，则不会渲染条件块，直到条件变为真时，才会开始渲染条件块。

v-show 

    v-show 不管初始条件是什么，元素总是会被渲染，只会根据条件的真假，在display:block 和display:none 之前切换

注意事项

    当出现v-show 以及v-if 不生效，没有根据数组中的值的变化而变化时，请检查数组中的值的变化是否是通过Vue.set来执行修改,例如：

    以下代码中

    <div v-show="items[0].isShow"></div>

    使用这种方式修改数字中的元素的值是错误的

    items[0].isShow=true;

  正确的写法应该如下

    item=items[0]
    Vue.set(item,"isShow",true)