vuejs之路之--条件渲染

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

总结之......

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

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

<template v-if = "!add">
			<h1>{{datas}}</h1>
			<h2>{{datas}}</h2>
			<h3>{{datas}}</h3>
		</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 不支持 <template> 语法，也不支持 v-else