vue中的条件渲染v-if和v-show的区别、以及v-else-if、v-else

v-if后面是一个JS表达式，它的返回值true或者false来决定这个<div>是否挂载在页面之上

v-show也能控制一个模板标签是否在页面上显示

在浏览器的控制台上：可以用vm.show来改变show的值：

在浏览器的控制台上：可以用vm.show来决定是否显示：

它俩的区别：

v-if对应的JS表达式的值为false，那么它对应的标签压根不会出现在DOM之上

v-show对应的JS表达式的值为false，那么它对应的标签依然在DOM之上，只不过是以display:none的形式放在页面之上

如果用vm-show,为true时，两个都显示，为false时，都不显示，但是v-show的标签依然在DOM上

用v-show指令性能会高一些，因为它不会频繁地把一个DOM元素从页面上删除再添加，而v-if每次隐藏和显示都相当于删除DOM和添加DOM，所以v-if的性能会相对较低

 

v-if、v-else-if、v-else：这三个指令要连在一起写，中间不能被任何标签所分隔

 

key值：vue习惯复用已存在的DOM，若有两个</input>，当要求切换不同的<input/>时（vm-show为true或者false时），vue会复用已有的<input />：以下的输入框并未改变

这时则需要key来区分，有key时，vue会知道它是页面上唯一的元素，如果两个key不一样，vue就不会复用以前的input标签了：