VUE-v-if和v-else的使用

1、v-if和v-else   

<h2 v-if="true">v-if</h2>
<h2 v-else>v-else</h2>

注：v-if为真 时，显示v-if的内容，否则显示v-else的内容

2、v-show

<h2 v-show="true">显示我</h2>

注：v-if和v-show的区别

v-if和v-show的作用都把内容显示和隐藏，不同的是，v-if在元素隐藏的时候，是把整个DOM元素删除。v-show是在DOM元素上添加一个样式，把内容隐藏起来。

****用法：当内容需要频繁切换的时候，就用v-show，反之则用v-if

 

****切换登录方式小案例（v-if  \  v-else）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<div id="app">
    <!-- <h2 v-if="isShow">v-if</h2>
    <h2 v-else>v-else</h2> -->
    <span v-if="isShow">
        <label for="user">密码登录</label>
        <input type="text" id="user" placeholder="请输入你的QQ">
    </span>
    <span v-else>
        <label for="email">邮箱登录</label>
        <input type="text" id="email" placeholder="请输入你的邮箱">
    </span>
    <button @click="change()">切换方式</button>
</div>

<body>
    <script>
        let vm = new Vue({
            el: '#app',
            data: () => ({
                isShow: true
            }),
            methods: {
                change: function () {
                    this.isShow = !this.isShow
                    console.log(this.isShow)
                }
            }
        })
    </script>
</body>

</html>

注：input的复用问题

  当切换方式发生改变的时候，输入框里面的内容不会清空   

 

这是因为VUE后台处理的原因。

1、因为邮箱登录和密码登录不能同时出现

2、在内容渲染到页面的时候，VUE会创建一个虚拟DOM

 

 

 所以当邮箱登录和密码登录相互切换的时候，因为组成他们的DOM元素是一样的，为了提升性能，VUE后台作出处理，当DOM元素相同时，它会复用之前的那个DOM，所以导致切换登录方式后，input里面的内容不会改变。其实他们用的就是同一个input.

解决方案

<label for="user">密码登录</label>
<input type="text" id="user" placeholder="请输入你的QQ" key="a">

在input里面加上一个key---唯一标识

当两个input里面的key相同时，input就会复用，反之就不会复用

 

posted @ 2019-10-21 17:17  个人升级打怪  阅读(21681)  评论(1)  编辑  收藏  举报