vue中ref 根据多选框所选数量,动态地变换box的高度

在这里插入图片描述

查看本专栏目录


关于作者

还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信,一起交流。

在这里插入图片描述

No.推荐链接
1Openlayers 【入门教程】 - 【源代码+图文 300+】
2Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3Cesium 【入门教程】 - 【源代码+图文示例200+】
4MapboxGL【入门教程】 - 【源代码+图文示例150+】
5前端就业宝典 【面试题+详细答案 1000+】

在这里插入图片描述

文章目录

      • 核心算法:
      • 示例效果图
      • 示例源代码

做项目时候碰到这样的一个需求: 左边列表中有4种类型,通过checkbox做选择,选择的数量的不同,决定了右侧的box的高度的不同。这里采用了ref的方法,定位到dom,进行高度的改变。

核心算法:

this.$ref.box.style.height= XXX+‘px’

示例效果图

在这里插入图片描述

示例源代码

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-03-14
*/

<template>
	<div class="djs-box">
		<div class="topBox">
			<h3>vue中 ref 根据多选框所选数量,动态地变换box的高度</h3>
			<div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div>
		</div>
		<div class="dajianshi">
			<div class="left">
				<el-checkbox-group v-model="checkedCities">
					<p v-for="city in cities" :key="city">
						<el-checkbox :label="city" @change="changeSize()">{{city}} </el-checkbox>
					</p>
				</el-checkbox-group>
			</div>
			<div class="box" ref="box">
				<p v-for="(item,index) in restaurants" :key="index">
					{{ item.name }}
				</p>
			</div>
		</div>
	</div>
</template>

<script>
	const cityOptions = ['上海', '北京', '广州', '深圳'];
	export default {
		data() {
			return {
				checkedCities: ['上海', '北京'],
				cities: cityOptions,
				restaurants: [{
						"name": "三全鲜食(北新泾店)",
					},
					{
						"name": "Hot honey 首尔炸鸡(仙霞路)",
					},
					{
						"name": "唦哇嘀咖",
					},
					{
						"name": "爱茜茜里(西郊百联)",
					},
					{
						"name": "爱茜茜里(近铁广场)",
					},
					{
						"name": "鲜果榨,汁(金沙江路和美广店)",
					},
					{
						"name": "开心丽果(缤谷店)",
					},
					{
						"name": "超级鸡车(丰庄路店)",
					},
					{
						"name": "三全鲜食(北新泾店)",
					},
					{
						"name": "Hot honey 首尔炸鸡(仙霞路)",
					},
					{
						"name": "唦哇嘀咖",
					},
					{
						"name": "爱茜茜里(西郊百联)",
					},
					{
						"name": "爱茜茜里(近铁广场)",
					},
					{
						"name": "鲜果榨,汁(金沙江路和美广店)",
					},
					{
						"name": "开心丽果(缤谷店)",
					},
					{
						"name": "超级鸡车(丰庄路店)",
					},
					{
						"name": "三全鲜食(北新泾店)",
					},
					{
						"name": "Hot honey 首尔炸鸡(仙霞路)",
					},
					{
						"name": "唦哇嘀咖",
					},
					{
						"name": "爱茜茜里(西郊百联)",
					},
					{
						"name": "爱茜茜里(近铁广场)",
					},
					{
						"name": "鲜果榨,汁(金沙江路和美广店)",
					},
					{
						"name": "开心丽果(缤谷店)",
					},
					{
						"name": "超级鸡车(丰庄路店)",
					}
				],
			}
		},
		mounted() {
			this.changeSize()
		},
		methods: {
			changeSize() {
				let m = this.checkedCities.length;
				let k = 500 - m * 50;
				this.$refs.box.style.height = k + "px"
			},

		}

	}
</script>
<style scoped>
	.djs-box {
		width: 1000px;
		height: 650px;
		margin: 50px auto;
		border: 1px solid black;
	}

	.topBox {
		margin: 0 auto 0px;
		padding: 10px 0 20px;
		background: black;
		color: #fff;
	}

	.dajianshi {
		width: 98%;
		margin: 0 auto;
		height: 520px;
		background-color: cde;
		position: relative;
	}

	.left {
		width: 30%;
		height: 500px;
		float: left;
		margin:100px 10px 0;
	}

	.box {
		width: 60%;
		height: 500px;
		float: right;
		margin:10px;
		overflow-y: auto;
		/* 必须允许滚动 */
		border: 1px solid #369;
	}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/455336.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何调整yolo混淆矩阵的大小,使其更加美观

1、找到xxx/utils/metrics.py 2、找到这个函数 3、往下拉找到这里&#xff0c;自己对照改一下 import seaborn as snarray self.matrix / ((self.matrix.sum(0).reshape(1, -1) 1E-9) if normalize else 1) # normalize columnsarray[array < 0.005] np.nan # dont a…

分布式之Sentinel使用和源码分析

Sentinel使用和源码分析 1、服务雪崩效应 在分布式系统中,由于网络原因或自身的原因,服务一般无法保证 100% 可用。如果一个服务出现了问题&#xff0c;调用这个服务就会出现线程阻塞的情况&#xff0c;此时若有大量的请求涌入&#xff0c;就会出现多条线程阻塞等待&#xff…

Redirect相应重定向无法访问WEB-INF下的静态资源,可以跳到外部资源(比如www.baidu.com)

相应重定向无法访问WEB-INF目录下静态资源&#xff0c;WEB-INF目录下静态资源受保护。 访问外部资源 访问Servlet5.do&#xff0c;就跳到百度页面

【快速上手ProtoBuf】proto 3 语法详解

1 &#x1f351;字段规则&#x1f351; 消息的字段可以⽤下⾯⼏种规则来修饰&#xff1a; singular &#xff1a;消息中可以包含该字段零次或⼀次&#xff08;不超过⼀次&#xff09;。 proto3 语法中&#xff0c;字段默认使⽤该规则。repeated &#xff1a;消息中可以包含该…

二,几何相交---4,BO算法---(3)数据结构

数据结构分两块&#xff0c;一个是某一时间状态的局部相交线段。一个是事件队列&#xff0c;是某一时刻局部相交线段的集合。

【Java设计模式】十九、中介者模式

文章目录 1、中介者模式2、案例3、总结 1、中介者模式 如图&#xff1a; 同事类之间关联较多时&#xff0c;整体出现网状结构&#xff0c;耦合度极高。一个对象一变动&#xff0c;好多对象都得改。若变为右边的星形结构&#xff0c;则一个类的变动&#xff0c;只影响自身与中介…

Vulnhub - DevGuru

希望和各位大佬一起学习&#xff0c;如果文章内容有错请多多指正&#xff0c;谢谢&#xff01; 个人博客链接&#xff1a;CH4SER的个人BLOG – Welcome To Ch4sers Blog DevGuru 靶机下载地址&#xff1a;DevGuru: 1 ~ VulnHub 目录 0x01 信息收集 0x02 Web漏洞利用 - W…

Ansible管理主机的清单------------inventory

一、 Ansible组成 INVENTORY&#xff1a;Ansible管理主机的清单 /etc/ansible/hosts 需要管理的服务清单,(将你需要管理的主机 、地址 或者名字 写入此文件) MODULES&#xff1a;Ansible执行命令的功能模块&#xff0c;多数为内置核心模块&#xff0c;也可自定义 PLUGINS&…

掌握抽象基础之20个必备原则,看完你还不会,你打我

抽象基础之20个必备原则 1. 面向对象编程&#xff08;OOP&#xff09;中抽象原则背后的基本思想是什么&#xff1f;2.抽象和封装的区别&#xff1f;3.提供一个现实生活中说明抽象的例子4.在编程语言中如何实现抽象&#xff1f;5.定义抽象类6.提供一个抽象类的真实世界场景7.解释…

大数据赋能,能源企业的智慧转型之路

在数字洪流中&#xff0c;大数据已经成为推动产业升级的新引擎。特别是在能源行业&#xff0c;大数据的应用正引领着一场深刻的智慧转型。今天&#xff0c;我们就来探讨大数据如何在能源企业中发挥其独特的魅力&#xff0c;助力企业提效降本&#xff0c;实现绿色发展。 动态监控…

学生时期学习资源同步-1 第一学期结业考试题5

原创作者&#xff1a;田超凡&#xff08;程序员田宝宝&#xff09; 版权所有&#xff0c;引用请注明原作者&#xff0c;严禁复制转载

Java推荐算法——特征加权推荐算法(以申请学校为例)

加权推荐算法 文章目录 加权推荐算法1.推荐算法的简单介绍2.加权推荐算法详细介绍3.代码实现4.总结 1.推荐算法的简单介绍 众所周知&#xff0c;推荐算法有很多种&#xff0c;例如&#xff1a; 1.加权推荐&#xff1a;分为简单的特征加权&#xff0c;以及复杂的混合加权。主要…

软考高级:系统工程方法(霍尔三维结构、切克兰德方法等)概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

Python+Selenium 自动化 - 开发环境搭建

PythonSelenium 自动化 - 开发环境搭建 一、Python 下载与安装二、Geany 代码编辑工具下载与安装三、代码运行演示 一、Python 下载与安装 Python 官网&#xff1a;https://www.python.org/ 首先在官网下安装包。 建议选择稳定版本&#xff0c;我这里下载的是 3.12.2 版本。 …

C++Qt学习——添加资源文件

目录 1、创建好了文件之后&#xff0c;在左边空白处按下CtrlN&#xff0c;创建Qt 以及Qt Resource File 2、写入名称&#xff0c;点击下一步 3、可以发现已经创建好啦。 4、点击Add Prefix 5、写上前缀&#xff0c;最好加上斜杠 6、选择提前放好的图片或者icon 7、发…

2024最新修复版独立付费进群系统源码全开源

1、修复SQL表 2、修复支付文件 3、修复支付图标不显示 4、修复定位、分销逻辑、抽成逻辑 5、新增支持源支付、易支付的支付接口 6、修复官方微信、支付宝支付接口文件 本来早就可以完工的&#xff0c;被99ai群里的几个傻逼耽搁了&#xff0c;做好自己就行了&#xff0c;这…

Learn OpenGL 09 投光物+多光源

将光投射(Cast)到物体的光源叫做投光物(Light Caster)。 投光物主要分为点光源&#xff0c;聚光灯&#xff0c;平行光。 平行光 当一个光源处于很远的地方时&#xff0c;来自光源的每条光线就会近似于互相平行。不论物体和/或者观察者的位置&#xff0c;看起来好像所有的光都…

C++:vector类

vector的介绍及使用 1. vector 是表示可变大小数组的序列容器。 2. 就像数组一样&#xff0c; vector 也采用的连续存储空间来存储元素。也就是意味着可以采用下标对 vector 的元素进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c;它的大小是可以动态改变的…

解锁App推广新姿势:Xinstall二维码信息获取秘籍

在移动互联网时代&#xff0c;App推广已成为各大企业和开发者必不可少的一项工作。而在推广过程中&#xff0c;二维码作为一种便捷的下载和安装方式&#xff0c;被广泛应用于各种场景。然而&#xff0c;如何有效获取并利用这些二维码信息&#xff0c;却成为了一个令人头疼的问题…

AUTOSAR软件配置(3):MCAL下载安装

前言 所有的NXP软件的下载安装都是需要自己在官网去注册账号的 中文的NXP官方网址&#xff1a;恩智浦半导体官方网站 | NXP 半导体 注&#xff1a;本文指导安装教程将以S32K144平台为例展开。 下载 找到下载入口的指引 然后在左侧的导航栏找到AUTOSAR 然后选择4.2版本 在…