[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