一、v-if
1、概述
v-if=””指令用于条件性的渲染一块内容,这个内容只会在返回truthy值(所有能被隐式转换成true的值)时被渲染。
2、条件渲染多个标签内容
我们可以使用标签将我们想要条件渲染的多个标签包起来,并在标签上写v-if条件语句,最后的渲染结果不包含标签。
3、else if 和 else 语句 我们可以用 v-else-if 来表示正常if语句后的 else if 语句,v-else-if 语句必须紧挨着 v-if 语句,否则不会被识别; v-else 语句,用来表示正常的 else 语句,必须紧挨着 v-else-if 或 v-if 语句,否则不会被识别。 这些语句都是分开写在不同标签里的,例如: 4、Vue的性能优化 当我们渲染的时候标签是同一种标签时,Vue会尽量减少重复部分的渲染,我们看一下下面这个例子: 当loginType改变时,切换到下面的template标签时,除了改变的内容会重新渲染(label标签中的内容和input中的placeholder的内容),其他的都不会重新渲染,比如我们已经在input中输入的内容,在重新渲染后还是会保留。 在某些情况下,这帮不是我们需要的,例如切换登陆方式,我们会希望将用户输入的用户名清空,这时我们就需要使用key来将这两个input标签变成唯一的,重新渲染时会重新渲染整个标签,例如: 5、v-show v-show同样是根据条件选择是否展示元素,大致用法为: 不同的是v-show的元素始终会被渲染,当条件不成立v-show的消失只是简单的切换元素的CSS property display。 v-show既不支持标签也不支持v-else。