vue 动态绑定样式，实现隐藏或显示

原创已于 2022-03-11 09:20:28 修改 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #jquery #c语言

于 2022-02-27 12:08:49 首次发布

vue 专栏收录该内容

41 篇文章

订阅专栏

本文探讨了如何在Vue中使用v-show实现元素的动态显示与隐藏，以及为何避免v-if的销毁与重建行为。通过实例解析了两者在性能上的差异，适合前端开发者理解和实践.

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-show 就是动态设置 display

:class="[show_side?'show':'hide']"

<el-aside width="200px" style="overflow: hidden; border-right: 1px #efefef solid;" :class="[show_side?'show':'hide']" >

</el-aside>

.show{}
.hide{
  display: none;
}

这样只是样式上的隐藏和显示，如果用v-if 则会销毁和创建 el-aside

比如这样不可取：

<el-aside v-if="show_side" width="200px" style="overflow: hidden; border-right: 1px #efefef solid;"   >

</el-aside>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

QQ2856639881

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue3 - style v-bind 动态样式（详细使用教程）

资深程序员

11-13

8992

Vue3 官方文档教程，vue3.js style v-bind 动态样式如何使用，Vue3动态样式你不会吗，Vue指令中的v-bind之动态更改样式，Vue3 样式绑定 | 菜鸟教程，Vue:动态绑定样式(v-bind)，vue系列教程-07vue动态绑定样式，Vue中Class和Style实现v-bind绑定的几种用法，Vue3 - style v-bind 动态样式（详细使用教程）。

在vue中动态添加class类进行显示隐藏实例

12-30

如下所示： <div class=status_button> <el type=success click=checkSite>查岗</el> <el type=danger>视频</el> </div>  <div class=check_button class=[this.flag?> <ul class=cl> <li>用xinhic</li>

参与评论您还未登录，请先登录后发表或查看评论

vue中动态添加class类进行显示隐藏

最新发布

lph159的博客

07-19

6315

v-show是 Vue.js 提供的用于显示和隐藏元素的指令。与v-if不同，v-show通过切换元素的display样式来控制其显示或隐藏，而不是对元素进行销毁和重建。v-show的基本语法如下：

Vue2（三）：绑定样式、条件渲染(v-if，v-show)、列表渲染(v-for)、key的原理、列表过滤、列表排序

weixin_42044763的博客

08-12

2654

写法:class=“xxx” xxx可以是字符串、对象、数组。字符串写法适用于：类名不确定，要动态获取。对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。 2.绑定style样式其中xxx是动态值。其中a、b是样式对象。二、条件渲染 1.v-if 写法: (1).v-if=“表达式” (2).v-else-if=“表达式” (3).v-else=“表达式” 适用于：切换频率较低的场景。（因为会动DOM树，节点删来删去不

vue实现动画，点击实现隐藏显示

04-11

Vue的过渡效果主要由`<transition>`组件来实现，它可以包裹任何Vue实例的元素或组件，当这些元素或组件的v-if或v-show指令状态改变时，Vue会自动应用相应的进入和离开动画。 1. **基础用法**：使用`<transition>`...

vue+elementUi 实现密码显示/隐藏+小图标变化功能

10-15

标题和描述中提到的知识点是关于如何使用Vue框架结合Element UI组件库来实现密码输入框的显示/隐藏功能以及配合的小图标变化功能。具体实现涉及到Vue的响应式数据绑定、事件处理和条件渲染等核心特性，同时利用...

vue实现密码显示隐藏切换功能

08-27

Vue 实现密码显示隐藏切换功能 ...本文介绍了使用 Vue 实现密码显示隐藏切换功能的方法，包括 HTML 模板、JavaScript 代码、数据绑定、事件处理、CSS 样式和生命周期等知识点。希望本文能够对读者提供有价值的参考。

Vue实现固定定位图标滑动隐藏效果

10-16

4. 使用CSS过渡效果实现平滑的隐藏和显示动画。 5. 允许父组件自定义图标内容和监听点击事件。这种技术在移动端页面设计中非常实用，可以提高页面的互动性和用户的沉浸感。通过Vue.js的响应式数据绑定和组件化特性...

一个极度简单的类似侧边栏效果的Demo

09-06

这是一个很简单的示例，刚开始学习IOS不久，突然需要一个这种功能，看了网上的，都太过强大，本身看不太明白，也不太会维护，最后就自己简单处理了下手势，弄出了这个，发布上来供我们新手一起探讨。

vue 左侧菜单隐藏_vue实现点击左侧菜单，右侧跟着显示隐藏

weixin_39913117的博客

12-22

1449

1 2 3 4 5 6 {{ item.spaceName }}7 8 9 10 11 12 13 {{ item.classifyCategoryName }}14 15 16 ...

vue展示与隐藏侧边栏功能

qq_41742961的博客

03-29

3719

<el-menu :default-active="defaultActive" class="el-menu-vertical-demo" background-color="#3C4A78" :active-text-color="isCollapse ? '#fff' : '#3C4A78'" text-color="#F6F8FF" unique-opened :collapse="isCollapse" .

elementUI 隐藏aside的横向滚动条和竖向滚动条

H-rosy的博客

07-17

9938

今天给大家介绍如何设置elementUI中滚动条的隐藏问题，因为是在今天做侧边栏里面的导航时出现了底侧导航栏和右边的导航栏，一看是在是有点那么如何在也页面缩放时也取消侧边栏呢，那么就可以直接使用这个样式，就更加方便啦~隐藏底部导航栏只需要把会出现侧边栏的内容区域放在标签中即可，在为这个标签加一个类名就叫做page-scroll，然后在加入下面的样式。我就是把el-menub标签放进了标签里...

CSS——6.显示与隐藏、cursor、文本框聚焦、垂直对齐、文字溢出、推拉门设计、重复边框、css三角形

m0_46279684的博客

08-19

1006

vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片/表单与文字的对齐。强制在一行显示所有文本，直到文本结束或者遇到br标签才换行。思路：将其它的三个三角形的颜色去掉——>四个边框的颜色都要写，写成transparent变成透明。当对象内文本溢出时显示省略标记（...）不显示省略标记（...），而是简单的裁切。设置或检索是否使用一个省略标记（...）表示对象内文本的溢出。1.首先来看下把div的宽、高都设置成0，添加边框值的效果。

v-model实现双向绑定、v-show、v-if、v-else-if、v-for的使用

qq_57423665的博客

04-18

1752

当数据源里的username的值改变，v-model 和 v-bind 绑定的元素的值都会发生改变，但是如果改变 v-bind 绑定的元素里的值，数据源里的username的值不会发生改变，而v-model 会。vue提供了v-model双向数据绑定指令,用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。注意: v-else-if 指令必须配合v-if指令一起使用，否则它将不会被识别!注意: v-else 指令必须配合v-if指令一起使用，否则它将不会被识别! v-for、v-show

el-aside修改下拉条为el-scrollbar

lijiabin102的博客

11-16

1743

使用elementUI做项目时，经常会用到他的左右结构的容器，尤其是在后台管理系统的页面，就是他的Container 布局容器，左边是el-aside，里面放的是下拉菜单，经常是el-menu 左边的菜单一般是这样的：这样的默认格式有一个很明显的问题，就是当左侧的菜单展开后很长的时候，就会出现下拉条，而这个默认的下拉条是非常丑的，而且当下拉条从无到有出现的时候，他会凭空占据15px的宽，所以右边的内容会忽然向右移动15px，非常难看。比较好的解决办法是使用elementUI自带的下拉条el-scrol

css隐藏滚动条

kurcp的博客

11-25

403

隐藏滚动条并可是滚动

Vue动态表格实现教程与可下载小demo

在动态表格中，这可以用来实现某些列在特定条件下显示或者隐藏。从压缩包文件的名称列表“vue-dynamic-table”来看，压缩包中应该包含了实现动态表格的核心文件，包括但不限于： - HTML模板文件（.html），用于...