6Vue条件渲染

条件渲染

v-if

用于条件性的渲染内容，这块内容在指令的表达式返回true的时候被渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>条件渲染</title>
</head>
<body>
    <div id="app">
        <div v-if="show">你好呀</div>
    </div>
    
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            show:false
        }
    })
</script>
</html>

v-show

还有和v-if相似的v-show:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>条件渲染</title>
</head>
<body>
    <div id="app">
        <div v-if="show">你好呀</div>
        <div v-show="show">嘻嘻嘻</div>
    </div>
    
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            show:false
        }
    })
</script>
</html>

v-show指令下的dom元素虽然看不见，但是还是渲染了的，只不过加了一个style="display:none",这个dom还是存在的。而v-if为false的情况下，这个dom是不存在的，会被适当的销毁或重建。所以，v-show的性能会高一点，不会频繁的删除增加dom。

v-else

v-if还可以配合v-else，如果v-if为false,就显示v-else对于的dom，但是v-if和v-else两个元素需要紧贴在一起，不然会报错

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>条件渲染</title>
</head>
<body>
    <div id="app">
        <div v-if="show">你好呀</div>
        <div v-else>bey bey了您</div>
    </div>
    
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            show:false
        }
    })
</script>
</html>

v-else-if

还有v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>条件渲染</title>
</head>
<body>
    <div id="app">
        <div v-if="show==='a'">你好呀</div>
        <div v-else-if="show==='b'">又见到你了</div>
        <div v-else>bey bey了您</div>
    </div>
    
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            show:'b'
        }
    })
</script>
</html>

key值问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>条件渲染</title>
</head>
<body>
    <div id="app">
        <div v-if="show">
            邮箱：<input />
        </div>
        <div v-else>
            用户名：<input />
        </div>
    </div>
    
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            show:true
        }
    })
</script>
</html>

进行show值的修改，结果如下

我们会从上面两张图片发现，在show值改变的同时，确实从邮箱变成了用户名，但是input框中的内容确没有清空。

这是因为vue会尝试复用页面上的dom，但是在复用的过程中可能导致原来的内容不会清空。属于diff算法的问题

我们可以加一个key值，Vue会知道这是页面上唯一的一个元素，Vue就不会去复用它了。

代码如下：

 <div id="app">
        <div v-if="show">
            邮箱：<input key="email"/>
        </div>
        <div v-else>
            用户名：<input key="usename" />
        </div>
    </div>

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。但是不推荐二者同时使用。