七、条件渲染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-ifv-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>

 

   

posted @ 2021-09-06 20:46  Strugglinggirl  阅读(1370)  评论(0编辑  收藏  举报