v-if 和v-show 的区别


第074个

查看专栏目录: VUE ------ element UI

专栏目标

在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。

提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,updated, beforeDestroy,destroyed,activated,deactivated,errorCaptured,components,)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if,v-on,v-pre,v-cloak,v-once,v-model, v-html, v-text, keep-alive,slot-scope, filters, v-bind,.stop, .native, directives,mixin,render,国际化,Vue Router等

本文章目录

v-if和v-show都是Vue.js中的条件渲染指令,它们都可以根据表达式的值来决定是否渲染一个元素。但是它们的工作方式不同,因此在使用上也有一些区别。

v-if: 条件渲染

v-if指令根据表达式的值(真/假)来决定是否渲染一个元素。如果表达式的值为假(false),则元素及其子元素不会被渲染到DOM中;如果为真(true),则元素会被渲染。

使用规则:

单一用途: v-if适用于条件不经常改变的场景。每次条件改变时,Vue会创建或销毁元素,这意味着与该元素关联的数据绑定和事件监听器也会被创建或销毁。

块级作用域: v-if具有块级作用域,这意味着它会影响其内部所有子元素的渲染。

性能考虑: 频繁切换v-if可能会导致性能问题,因为每次状态改变都会导致元素的重新渲染。

v-show: 显示/隐藏

v-show指令用于控制元素的显示和隐藏,而不是真正地从DOM中移除或添加元素。它通过CSS的display属性来实现元素的显示和隐藏。

使用规则:

频繁切换: v-show适用于需要频繁切换条件的场景。因为它只是通过CSS来控制元素的显示和隐藏,所以不会像v-if那样导致元素的重新渲染。

性能考虑: 由于v-show只是通过CSS来控制元素的显示和隐藏,所以它的性能比v-if更好。

初始渲染: v-show在初始渲染时总是会渲染元素,无论条件是否满足。而v-if只有在条件满足时才会渲染元素。

代码示例

javascript 复制代码
<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div v-if="isVisible" class="box">This is a box (v-if)</div>
    <div v-show="isVisible" class="box">This is a box (v-show)</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin-top: 10px;
}
</style>

在这个例子中,我们有两个div元素,分别使用v-if和v-show指令来控制它们的显示和隐藏。当点击"Toggle"按钮时,isVisible的值会切换,从而触发元素的显示和隐藏。可以看到,使用v-if的元素会在条件不满足时从DOM中移除,而使用v-show的元素只会通过CSS来控制显示和隐藏。

相关推荐
还是大剑师兰特17 小时前
列出D3的所有交互方法,并给出示例
大剑师·d3的交互功能·d3交互·d3基础
还是大剑师兰特4 个月前
https执行过程,特点,作用
网络协议·https·大剑师
还是大剑师兰特4 个月前
TypeScript 定义不同的类型(详细示例)
javascript·typescript·大剑师·typescript入门·typescript教程
还是大剑师兰特6 个月前
javascript DOM 设置样式
javascript·大剑师·js设置样式·js内联样式
还是大剑师兰特6 个月前
JavaScript的垃圾回收机制
javascript·大剑师·js垃圾回收·js内存管理
还是大剑师兰特7 个月前
程序员副业之路:我是如何赚到100万的?
大剑师·程序员副业
还是大剑师兰特8 个月前
openlayers 入门教程(五):sources 篇
大剑师
赢乐8 个月前
在Vue开发中v-if指令和v-show指令的使用介绍,v-if和v-for的优先级以及使用注意事项的介绍
条件渲染·条件判断·v-for·v-show指令·v-if指令·display属性·v-else
还是大剑师兰特9 个月前
Vue中$root的使用方法
vue.js·大剑师·vue的root
还是大剑师兰特9 个月前
vue三种路由守卫详解
vue.js·大剑师