vuejs之路之--条件渲染

顾名思义,就是根据条件的不同来渲染,只有当条件为真的时候才显示:

总结之......

1.就是v-if,v-else,v-else-if之间的关系,只有其中某一个的值为真的时候才会渲染,但是有一点要注意的是,v-else,v-else-if必须要紧跟着v-if或者v-else-if之后才行,否则vuejs将不会识别

2.template元素通常可以作为包装元素,包装一个元素块(里面可以有多个元素,但是在渲染的时候这个包装元素不会被渲染进去)

3.用key管理可复用的元素, Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可:

具体可见官网:key属性管理可复用元素

v-show

可以达到同样的效果,只不过v-show是通过控制css来控制元素的显示与否的,而v-if则是通过元素的生成和销毁来控制的,所以v-if和v-show还是有区别的--相对而言v-if 有更高的切换开销,因为在切换的时候需要重新生成新的元素,或者使元素销毁掉;而 v-show 有更高的初始渲染开销,因为v-show是通过css来控制显示与否的,无论显示不显示都会进行渲染。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好;

还有一点,v-show 不支持