013 V v-if+v-else-if+v-else
本帖最后由 不二如是 于 2018-9-11 09:57 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们介绍了两个很简单但不是很常用的基本指令，本次来学习条件渲染指令。
大家不要见怪，这三个指令其实和JS中的if、else-if、else类似，只不过在Vue中可以根据表达式的值在DOM中渲染或销毁元素或者组件。
创建div：
<div id="myApp">
<p v-if="status === 1">当status为1时才能看到我</p>
<p v-else-if="status === 2">当status为2时才能看到我</p>
<p v-else>只要status既不是1也不是2，那就都能看到我</p>
</div>
创建Vue实例：
<script>
var app = new Vue({
el:"#myApp",
data:{
status:2
}
})
</script>
v-else-if要紧跟v-if，v-else放在最后，当表达式对应条件为真，就会像对应的节点/组件进行渲染。
人工置顶status为2，输出对应的内容。
出于效率的考虑，Vue在渲染元素时，会尽可能复用已有的元素而非重新渲染。
我们举个例子，创建div：
<div id="myApp">
<template v-if="type === 'name'">
<label>用户名：</label>
<input placeholder="请鱼油输入用户名">
</template>
<template v-else-if="type === 'mail'">
<label>邮箱：</label>
<input placeholder="请鱼油输入邮箱">
</template>
<template v-else>
<label>密码：</label>
<input placeholder="请鱼油输入密码">
</template>
</div>
template是Vue内置的元素，用来判断多个元素。
创建Vue实例：
<script>
var app = new Vue({
el:"#myApp",
data:{
type:'name'
},
methods:{
myClick:function () {
this.type = (this.type==='name'?'mail':(this.type==='mail'?'password':'name'))
}
}
})
</script>
输入内容，点击按钮，虽然DOM变了，但是之前输入框的内容并没有改变，只是替换了placeholder的内容，说明input元素被复用了。
下面的代码是一段三元运算符：
this.type = (this.type==='name'?'mail':(this.type==='mail'?'password':'name'))
等同于一个判断：
if(this.type == 'name'){
this.type = 'mail';
}
else {
if(this.type == 'mail'){
this.type = 'password';
}
else{
this.type = 'name';
}
}
如果鱼油不希望元素被复用，可以使用Vue中的key属性。
它可以让咱们自己决定某个元素是否被复用。
我们修改div，为每一个元素添加一个key：
<template v-if="type === 'name'">
<label>用户名：</label>
<input placeholder="请鱼油输入用户名" key="nameInput">
</template>
<template v-else-if="type === 'mail'">
<label>邮箱：</label>
<input placeholder="请鱼油输入邮箱" key="mailInput">
</template>
<template v-else>
<label>密码：</label>
<input placeholder="请鱼油输入密码" key="passwordInput">
</template>
课后作业
1、我们可以通过v-if、v-else-if、v-else来销毁元素？（T/F）
2、template是Vue内置的？（T/F）
3、将下面的三元操作符分解成if-else形式：
test ? expression1 : (test2 ? expression2 : expression3)
4、如果不希望元素复用怎么办？
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 1.F
2.T
3.
if(true == test) {
return expression1;
} else {
if(true == test2) {
retrun expression2;
} else {
return expression3;
}
}
4.给元素添加key值 0 T 1
页:
[1]