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