v-if和v-show的异同和使用场景

通过一个案例来寻找v-if和v-show的异同:

说明:

  • el(即element的缩写),它指定vm实例对象将要控制的区域,(本例为id="app"的模块。)
  • data 是个对象,指定了控制区域内要用到的数据。
  • methods 虽然有s后缀,但是它代表对象,在此部分自定义方法。
  • 在VM实例中,如果要访问data上的数据,或者要访问 methods中的方法,必须要在前面加 this。
<body>
<div id="app">
    <input type="button" @click="toggle" value="显示/隐藏">
    <h3 v-if="flag">这是用v-if控制的元素h3>
    <h3 v-show="flag">这是用v-show控制的元素h3>
div>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            flag:true,
        },
        methods:{
            toggle(){
               this.flag=!this.flag;
               // 也可直接在button 中写@click="this.flag=!this.flag"
            },
        }
    })
script>
body>

处于显示状态的效果图如下:
v-if和v-show的异同和使用场景_第1张图片
显示状态时查看控制台如下:
在这里插入图片描述
处于隐藏状态的效果图如下:
在这里插入图片描述
文本被隐藏,查看控制台效果如下:
在这里插入图片描述
=》我们可以发现对于v-show指令,元素隐藏时,只是增加了display:none的样式,而 v-if 指令则直接通过把该行删除来实现了隐藏效果。

结论:

v-if和v-show的相同点:

  • 都能够实现指定内容的显示和隐藏操作的效果

v-if和v-show的不同点:

  • v-if在每次完成显示和隐藏功能时,需要不断的在dom树上完成节点的创建和删除操作
  • v-show则直接通过修改display样式的属性值来完成。

v-if和v-show的使用场景总结:

  • 当一个元素会被频繁的显示和影藏时,使用v-show。
  • 当元素在响应式网页的操作过程中,根据不同用户的需求,可能永远不会被显示或被隐藏,则选择使用v-if。

你可能感兴趣的:(Vue)