第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来控制显示和隐藏。