北京网站推广营销服务电话,学校网站的功能,wordpress 自适应,百度手机网页版入口第074个 查看专栏目录: VUE ------ element UI 专栏目标
在vue和element UI联合技术栈的操控下#xff0c;本专栏提供行之有效的源代码示例和信息点介绍#xff0c;做到灵活运用。 提供vue2的一些基本操作#xff1a;安装、引用#xff0c;模板使用#xff0c;computed本专栏提供行之有效的源代码示例和信息点介绍做到灵活运用。 提供vue2的一些基本操作安装、引用模板使用computedwatch生命周期(beforeCreatecreated,beforeMountmounted, beforeUpdateupdated, beforeDestroydestroyedactivateddeactivatederrorCapturedcomponents)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-ifv-onv-prev-cloakv-oncev-model v-html, v-text, keep-aliveslot-scope filters, v-bind.stop, .native, directivesmixinrender国际化Vue Router等 本文章目录 专栏目标v-if: 条件渲染v-show: 显示/隐藏代码示例 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只有在条件满足时才会渲染元素。
代码示例
templatedivbutton clicktoggleToggle/buttondiv v-ifisVisible classboxThis is a box (v-if)/divdiv v-showisVisible classboxThis is a box (v-show)/div/div
/templatescript
export default {data() {return {isVisible: true};},methods: {toggle() {this.isVisible !this.isVisible;}}
};
/scriptstyle
.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来控制显示和隐藏。
