在vue中,“v-if”用于根据表达式的真假来操作DOM元素,可以切换元素的显示和隐藏;表达式的值为true时,元素存在于dom树中,表达式为false时,元素从dom树中移除,语法为“v-if="表达式"”。

本文操作环境:windows10系统、Vue2.9.6版,DELL G3电脑。
vue中v-if的用法
v-if:根据表达式的真假,切换元素的显示和隐藏(操作DOM元素)

(1)v-if运用
立即学习“前端免费学习笔记(深入)”;
{{message}}
只有在为true的时候才会显示数据
(2)v-if与v-else
{{message}}
hello
v-if为true的时候执行if,否则,执行else
(3)案例:v-if与v-else的应用
点击切换类型后可以切换显示内容,这个时候会存在input标签复用的问题(切换后输入框中的内容没有改变,这是虚拟DOM,尽可能地复用已经存在的元素,而不是新建一个元素,可以提升性能),可以增加key属性,当key一样的时候就会保留内容,不一样的时候就不会保留
【相关推荐:《vue.js教程》】










