[Vue]Vue指令v-if的另类用法

由于 v-if 在条件为 false 时，会销毁它内部的所有内容，当条件为 true 时，重新渲染内部的内容，所以 v-if 可以用作刷新某些区域用。

例子1

例如，input[type=file] 控件，如果你选择的文件跟上次选择的是同一个，它就不会触发 change 和 input 事件，除非你选择一个新的文件。即使大多数情况下，这种情形并不需要特殊处理，因为用户不可能老是选择同一个文件，但总是会遇到特殊的时候。这个时候就可以用 v-if 来销毁原来的 file 控件，并渲染一个新 file，这个新的 file 上面绑定的数据、事件都跟原来一模一样：

<!-- template -->
<input type="file" v-if="someCondition" @change="onChange">

/* Data */
data(){
    return {
        someCondition: true
    }
}

/* Methods */
//file的change事件：
onChange(e){
    //想办法让someCondition经历 false - true 的转换
    this.someCondition = false;
    ...some code
    this.someCondition = true
}

现在，input[type=file] 已经是一个全新的了，即使你选择同一个文件，它也会响应 change 事件。

例子2

element-ui 的 tree 控件不是很完善，不提供刷新方法(也许是我没有发现)。如果你修改了某一个子项，然后想要重新加载整个树，就可以使用 v-if 来达到目的。用法跟上面是一样的。

End