首页 > 其他分享 >vue学习 第九天(1) 元素的显示与隐藏 display (不保留位置) / visibility (保留位置) / overflow (对超出的部分进行处理)

vue学习 第九天(1) 元素的显示与隐藏 display (不保留位置) / visibility (保留位置) / overflow (对超出的部分进行处理)

时间:2023-05-03 20:00:41浏览次数:39  
标签:第九天 vue 元素 保留 visibility display 位置 overflow 隐藏

                元素的显示与隐藏

本质: 让一个元素在页面中隐藏或者显示出来。

1、display属性,隐藏后不保留位置

  1)display::none;隐藏对象

  2)display:block;除了转换为块级元素之外,同时还有显示元素的意思。

  display 隐藏元素后,不再占有原来的位置。

 

2、visibility 可见性。  隐藏后保留位置

  

  1)visibility:visible;元素可视

  2)visibility:hidden;元素隐藏   

  visibility隐藏元素后,继续占有原来的位置。

 

3、overflow 溢出。 隐藏溢出部分

  overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度),后的情况

  

  

   如果有定位的盒子,内部元素需要设置超出盒子,就不可以用overflow:hidden;因为它会隐藏多余的部分。

   

标签:第九天,vue,元素,保留,visibility,display,位置,overflow,隐藏
From: https://www.cnblogs.com/changdasheng/p/17310059.html

相关文章

  • Vue2入门之超详细教程八-计算属性
    1、简介计算属性:1.定义:要用的属性不存在,要通过已有的属性计算得来2.原理:底层借助Object.defineproperty方法提供的getter和setter3.Get函数什么时候执行?(1) 初次读取时会执行一次(2) 当依赖的数据发生改变时会被再次......
  • Vue 前端设计模式梳理
    一、什么是设计模式?设计模式是一套被反复使用、多数人知晓、经过分类编目的、代码设计经验的总结。它是为了可重用代码,让代码更容易的被他人理解并保证代码的可靠性。   设计模式实际上是“拿来主义”在软件领域的贯彻实践,它是一套现成的工具,拿来即用。下面来看一下设计模......
  • java基于springboot+vue非前后端分离的影城管理系统、影院销售管理系统,附源码+文档+PP
    1、项目介绍本影城管理系统主要包括二大功能模块,即用户功能模块和管理员功能模块。(1)管理员模块:系统中的核心用户是管理员,管理员登录后,通过管理员功能来管理后台系统。主要功能有:首页、个人中心、用户管理、电影类型管理、放映厅管理、电影信息管理、购票统计管理、系统管理、订......
  • vue2实现数据聚合【scatter-clustering】组件封装
    实现如下效果:效果展示:https://code.juejin.cn/pen/7228568245148581943如果不会请移步到官网的栗子,请点击查看直接给大家上代码:整体代码片段1<template>2<divref="echarts"style="width:100%;height:300px;"></div>3</template>4<scrip......
  • java基于springboot+vue前后端分离的超市进销存系统管理系统、超市管理系统,附源码+数
    1、项目介绍超市进销存系统,通过这个系统能够满足超市进销存系统的管理及员工的超市进销存管理功能。系统的主要功能包括:首页、个人中心、员工管理、客户管理、供应商管理、承运商管理、仓库信息管理、商品类别管理、商品信息管理、采购信息管理、入库信息管理、出库信息管理、销......
  • 简单聊聊,使用Vue.js编写命令行界面,前端开发CLI的利器
    Temir介绍Temir,一个用Vue组件来编写命令行界面应用的工具.开发者只需要使用Vue就可以编写命令行应用,不需要任何额外的学习成本.<scriptlang="ts"setup>import{ref}from'@vue/runtime-core'import{TBox,TText}from'@temir/core'constcounter=ref(0)setIn......
  • Vue插槽
    1.匿名插槽----就是定义的时候不带name的插槽,使用的时候也不用带name总结:(1)一定要分清定义插槽和使用插槽格式。如上图A是在使用一个插槽的基础上再继续定义一个匿名插槽。(2)匿名插槽的使用可以加template也可以不加,例如图B和图C,那三个元素有没有用template包裹都一样会生效,也就......
  • Vue指令学习
    1.指令的定义指令(Directives)是带有 v- 前缀的特殊attribute。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。指令还有一些基本的要了解的就是指令的修饰符(.native,.stop,.prevent等),动态参数(<a@[event]="doSomething">),缩写(:,@等)。这些都是......
  • 用vue2封装轮播图组件
    日常练习用vue2封装轮播图组件,传入图片信息数组。实现思想:图片组添加translate动画,通过轮播到第几张图片作为参数,让图片组整体移动。Carousel.vue<template><divclass="carousel"><divclass="carouselList"><!--图片列表--><ulclass="img&quo......
  • ChatGPT搭建Express与Vue3网页版带后台
    技术架构golang+node16+vite+vue3+expresscnetos7以上+宝塔面板文字搭建教程把service目录上传到宝塔www/wwwroot目录下面,放通3000端口,新建一个数据库,导入数据库,修改.env里的配置进入到service目录,执行nohup./linux.bin&测试后端api有没有正常启动,执行curlhttp:/......