初识 Vue（12）---（Vue中的条件渲染）

最新推荐文章于 2024-05-05 22:37:07 发布

原创最新推荐文章于 2024-05-05 22:37:07 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

Vue 同时被 2 个专栏收录

28 篇文章

订阅专栏

从浅入深学 Vue

28 篇文章

订阅专栏

本文介绍了Vue.js中的条件渲染技巧，包括v-if、v-show、v-else、v-else-if等指令的应用，以及如何利用key属性提高元素更新效率。

Vue中的条件渲染

1.通过 v-if 指令，决定标签是否在页面展示或存在（当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的条件渲染</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='app'>
        <div v-if="show">{{message}}</div>
    <script>
       var vm = new Vue({
            el:'#app',
            data:{
                show:false,
                message:"Hello World"
            },
       })  
    </script>   
</body>
</html>

输出：当为 true 时，显示数据；

当为 false 时，不显示数据；

2.v-show

v-if 和 v-show :二者在刚开始运行时均取决于 show 变量，开始均为 false ，故二者均不展示；但区别在于，v-show 的页面实际是存在的，只是设置成了 display:none;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的条件渲染</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='app'>
        <div v-if="show" data-test="v-if">{{message}}</div>
        <div v-show="show" data-test="v-show">{{message}}</div>
    <script>
       var vm = new Vue({
            el:'#app',
            data:{
                show:false,
                message:"Hello World"
            },
       })  
    </script>   
</body>
</html>

输出：show = true 时；

show = false 时，v-if 不存在DOM中，但 v-show 存在，只是设置成了 display:none;频繁的显示与隐藏中性能更高。

3.v-else

v-if 和 v-else 必须紧跟在一起使用，之间不能有其他程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的条件渲染</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='app'>
        <div v-if="show" >{{message}}</div>
        <div v-else=>Bye World</div>
    <script>
       var vm = new Vue({
            el:'#app',
            data:{
                show:false,
                message:"Hello World"
            },
       })  
    </script>   
</body>
</html>

输出：show = false 时

show = true 时

4.v-else-if

v-if 、v-else-if 和 v-else必须紧跟在一起使用，之间不能有其他程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的条件渲染</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='app'>
        <div v-if="show ==='a'" >This is A</div>
        <div v-else-if="show ==='b'" >This is B</div>
        <div v-else=>This is others</div>
    <script>
       var vm = new Vue({
            el:'#app',
            data:{
                show:false,
                message:"Hello World"
            },
       })  
    </script>   
</body>
</html>

输出：开始默认是 a

输出改为 b

输出改为 c(和 a、b都不相同)

5.key 值

当给某个元素添加 key值时，就会是唯一的元素，若二者 key 值不一样则不会尝试复用以前的标签；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的条件渲染</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='app'>
        <div v-if="show">
            用户名：<input key="username"/>
        </div>
        <div v-else>
           邮箱名：<input key="email"/>
            </div>
    <script>
       var vm = new Vue({
            el:'#app',
            data:{
                show:false,

            },
       })  
    </script>   
</body>
</html>

输出：