知识点1:v-if和v-show都用来控制显示和隐藏的,他们的区别是:v-show是dom已经渲染,属性display:none,
v-if是dom不渲染,内容不存在dom中
划重点:v-show的性能更高。
知识点2:v-if 和 v-else: 他们必须放在一起写,否则会报错。还有v-else-if也一样。代码如下:
<div v-if="show === 'a'">{{message}}</div> <div v-else-if="show === 'b'">This is B</div> <div v-else>This is others</div>
知识点3:关于key值:如果没有key值的化,vue会尽量的复用,以提高性能。但有时候的效果可能不是我们想要的效果。只有加上key的值,vue才会将相同的代码分开:
比如:
<div v-if="block"> 用户名:<input key="user"/> </div> <div v-else> 邮箱名:<input key="email"/> </div>