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

in with 0 comments

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)



Responses /