013 V v-if+v-else-if+v-else

不二如是

                               
登录/注册后可看大图

上一讲我们介绍了两个很简单但不是很常用的基本指令，本次来学习条件渲染指令。

大家不要见怪，这三个指令其实和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、如果不希望元素复用怎么办？



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

Ruide

1.F
2.T
3.
if(true == test) {
    return expression1;
} else {
    if(true == test2) {
        retrun expression2;
    } else {
        return expression3;
    }
}
4.给元素添加key值

一笙彤

0

suweixuan1998

T

jack6666

1