Vue条件渲染（v-if和v-show的区别）

最新推荐文章于 2023-12-19 21:14:21 发布

努力做一只合格的前端攻城狮

最新推荐文章于 2023-12-19 21:14:21 发布

阅读量874

点赞数

分类专栏： react 文章标签： vue.js

本文链接：https://blog.csdn.net/shao_xuan_/article/details/123619940

版权

react 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue条件渲染（v-if和v-show的区别）

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

v-if

v-if、v-else-if、v-else
这三个指令与JavaScript的条件语句if、else、else if类似。
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-if="score>=90">优秀</p>
        <p v-else-if="score>=80">良好</p>
        <p v-else-if="score>=70">及格</p>
        <p v-else="score>=60">不及格</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                score:98
            }
        })
        window.setInterval(()=>vm.ok=!vm.ok,1000)
    </script>
</body>
</html>

在这里插入图片描述
v-if的原理

v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
也就是根本没有不会有对应的标签出现在DOM中。

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

注意，v-show 不支持 <template> 元素，也不支持 v-else。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p>张三</p>
        <p v-show='temp'>李四</p>
        <p v-show="ok">王五</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                temp:true,
                ok:false
            }
        })
        window.setInterval(()=>vm.ok=!vm.ok,1000)
    </script>
</body>
</html>

在这里插入图片描述

v-if和v-show的区别

相同点：两者都可用作为条件判断元素是否显示。

不同点：

1). v-if后可跟v-else-if 和 v-else用来进行不同条件下的显示组件的不同可能性，v-show只能作为是否展示。

2). v-if在想切换多个元素时把一个元素当做不可见的包裹元素上使用，v-show不能用元素

3).v-if 在条件切换过程中，事件监听器和子组件适当地被销毁和重建。

4). v-if条件为真才会渲染，条件为假则不渲染，v-show 无论条件真假总会渲染，只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

努力做一只合格的前端攻城狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue条件渲染（v-if和v-show的区别）

Vue条件渲染（v-if和v-show的区别）v-ifv-showv-if和v-show的区别v-ifv-if、v-else-if、v-else这三个指令与JavaScript的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ht
复制链接

扫一扫