007 v-if,v-else-if,v-else和v-show
[A] v-if...v-else 条件显示
1. 行内属性v-if的值为true时,则当前标签才被渲染出来,值为false,则不被渲染出来
2. 当v-if和v-else成对出现时,在任意时刻可都只会渲染其中一个
示例:
<div v-if="isShow">我的名字是:{{name}}</div>
<div v-else>我的性别是:{{sex}}</div>
[B] v-if...v-else-if......v-else
当出现多个条件时,使用v-else-if,在多个选择中,只显示一个
示例:
<div>
<div v-if="score > 90">优秀</div>
<div v-else-if="score > 80">良好</div>
<div v-else-if="score > 60">中等</div>
<div v-else>不及格</div>
</div>
[C] v-show
该属性的值为布尔值,值为true表示改标签显示,值为false表示该标签不显示
如:<h2 v-show="isShow">Carrey</h2> // 渲染后,该标签在页面上是看不到的
[D] v-if和v-show的区别
1. 当v-if和v-show的值为true时,没有区别,都表示当前元素显示
2. 当v-if和v-show的值为false时
v-if表示该元素不会被渲染, 即在开发者工具中看不到该节点
v-show表示钙元素会被渲染,但是他的display属性被设置为none,在开发者工具中可以看到,但是界面上看不到
【使用技巧】
当需要显示和隐藏的频率很高时,使用v-show
当只需要切换一次时,选择v-if
[E] 实战演练 属性key的使用
在登录界面,用户可以选择邮箱登录还是手机号登录
注意点:input复用的问题
问题:
1. 我们在有输入的情况下,切换了类型,我们会发现之前输入的内容还在输入框中
2. 但是,按理说切换到一个新的input中后,新的input元素没有输入内容,应该为空的
3. 为什么会出现这种情况?
解释:
1. Vue在进行DOM渲染的时候,处于性能考虑,会尽可能的复用之前已经存在的元素
2. 若之前的元素已然存在,则已然使用之前的元素,仅仅修改不一样的地方即可。
3. 因此,上面且更新了类型,但是input元素没变,这是修改了两个input元素不一样的地方
解决:
给input元素添加key属性,不一样的key会被认定为不同的两个DOM节点,会直接更换input元素。
示例代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style> .score{height: 50px; background-color:gray;} .login{ width: 500px; height: 300px; background-color: green;} .btn{display: flex; justify-content: space-around; align-items: center;} </style> <body> <div id="app"> <div v-if="isShow">我的名字是:{{name}}</div> <div v-else>我的性别是:{{sex}}</div> <div> <button @click="btnClick()">按钮</button> </div> <div class="score"> <div v-if="score > 90">优秀</div> <div v-else-if="score > 80">良好</div> <div v-else-if="score > 60">中等</div> <div v-else>不及格</div> </div> ********************用户登录演练************************ <div> <div class="login btn"> <span v-if="promts[0] == '手机号'"> <label for="email">用户{{promts[1]}}</label> <input type="text" placeholder="请输入邮箱号" id="email" key="email"> </span> <span v-else> <label for="phoneNumber">用户{{promts[1]}}</label> <input type="text" placeholder="请输入手机号" id="phoneNumber" key="phoneNumber"> </span> <button @click="shitfClick()">切换为{{promts[0]}}</button> <div> <button>确定</button> <button>取消</button> </div> </div> </div> ***********************v-if和v-show对比********************* <h2 v-show="isShow">Carrey</h2> <h2 v-if="isShow">Carrey hello</h2> hahah </div> </body> <script> var app = new Vue({ el: "#app", data:{ name: "Carrey", msg: "你好啊,我的朋友", isShow: true, sex: "男", score: 89, promts:["手机号", "邮箱号"], }, methods:{ btnClick(){ this.isShow = !this.isShow; }, shitfClick(){ this.promts.unshift(this.promts.pop()); } } }) </script>