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