四 VUE条件渲染

1、v-if和v-else

v-if是指条件符合的时候，才会显示（确切的说是存在，而不是display:none）这个元素

如下代码，msg那一条没有源码

<div id="app">
<span v-if="show">{{msg}}</span>
<span v-else>222</span>
</div>
</body>
<script>
var vm = new Vue({
  el:'#app',
  data:{
    show:false,
	msg:'123'
  }
});
</script>

2、template

有时候一个判断条件判断多个元素，如某个条件不符合，则多个input框不显示，此时我们可以用div包括起来，也可以使用多个v-if来处理，但是vue提供了一个更好的方法，template包裹标签。

<div id="app">
<template v-if="show">
<span>{{msg}}</span>
<span>222</span>
</template>
<template v-else>
<span>{{elsemsg}}</span>
<span>555</span>
</template>
</div>

传递到前台的页面不会有template标签

3、v-else-if

vue2.1后新增的属性，类似条件判断的else if

4、复用 #key

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

如上代码是不同的登录方式，如果用户输入框内容输入了一些东西，通过修改vue对象修改loginType时，input里的值不会被清空。vue会尽可能少的修改元素。这里智慧修改input的placeholder

但是如果使用如下代码用key标明这是两个不同的元素，那么就会重新渲染

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

5、v-show

使用和v-if类似，但是v-if是存在和不存在，v-show就是display的none和非none了。v-show不可以用template和v-else

如果显示与否的条件变化比较多，那么用v-show，否则用v-if，因为v-show只是css的变化，v-if是消除

但是v-show一定会渲染，只是被none了，初始化的开销相对比v-if大

用户权限就应该用v-if，而表单动态变化的就可以用v-show

6、优先级

v-for和v-if在一个标签内时，v-for的优先级比v-if高，会先遍历，然后在每个节点中判断是否符合if的标准

如果需要整个循环跳过的话，需要在父标签加上v-if