七、条件渲染v-if的使用

1、v-if指令，用于条件性地渲染一块内容。

     1> 只有指令的表达式返回true的时候，文档中对应的DOM元素才能被渲染。     

     2> 使用指令v-if='false'的标签，从文档中真正删去了这个DOM元素。

     3> 用 v-if 作三元运算符，返回结果不是boolen类型的话是没有意义的,因为只有指令的表达式返回true的时候，被渲染。

     4> template标签是Vue的模板标签，使用指令v-if='false'后，可以使该标签内的所有内容都从文档上消失。（推荐：tempalte标签和v-if配合使用效果最好，可以作            条件判断或者逻辑判断。）

2、指令v-if搭配v-else使用，可以做逻辑true/false的判断（基于判断结果再去做业务逻辑）。

      指令v-if搭配v-else-if和v-else使用，可以做多条件逻辑的判断（基于判断结果再去做业务逻辑）。

      （注意使用这两个指令的两个标签必须是同类型标签，且必须是同级标签，且是前后顺序使用）

3、v-if 加 key 值的作用：

       1> Vue在渲染元素时，会尽可能地复用已有的元素而非重新渲染，这么做会使Vue渲染效率变得非常高。

       2> 但是在开发中会出现我们不想要的结果。

            比如：在输入框中，输入一下内容，单击按钮切换，会发现之前输入的内容被保留了下来。

       3> 用key就可以解决这个问题。

<template>
    <div v-if="loginType=='1'">  
        手机号：<input type="text" placeholder="请输入手机号" key="1">    <!--8、搭配key使用，可以重新渲染dom元素，清除dom元素的原有内容-->
    </div>
    <div v-else>  
        E-mail：<input type="text" placeholder="请输入E-mail" key="2">  <!--注意，key的值必须是Number或者String,且必须是值唯一不能重复。-->
    </div>
    <button type="button" v-on:click="loginType=( loginType=='1'?'2':'1' )">切换登录模式</button>
</template>
<script>
    let data={
         loginType:'1'
    }; 
</script>