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元素。
示例代码：
<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>
