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

news2024/11/18 1:23:29

在这里插入图片描述

查看本专栏目录


关于作者

还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

BufferWriter类解析

咦咦咦&#xff0c;各位小可爱&#xff0c;我是你们的好伙伴——bug菌&#xff0c;今天又来给大家普及Java SE相关知识点了&#xff0c;别躲起来啊&#xff0c;听我讲干货还不快点赞&#xff0c;赞多了我就有动力讲得更嗨啦&#xff01;所以呀&#xff0c;养成先点赞后阅读的好…

如何进行软件安全性测试?CMA、CNAS软件安全测试报告获取

软件安全性测试是保障软件应用安全的重要手段&#xff0c;通过对软件系统的安全性进行全面评估和检测&#xff0c;以确保软件能够抵御各种潜在的安全威胁和风险。那么如何进行软件安全性测试?CMA、CNAS软件安全测试报告又该如何获取呢? 软件安全性测试是一种基于黑盒测试的方…

【机器学习智能硬件开发全解】(三)—— 政安晨:嵌入式系统基本素养【计算机体系结构中的CPU关系】

通过上一篇文章的学习: 【机器学习智能硬件开发全解】&#xff08;二&#xff09;—— 政安晨&#xff1a;嵌入式系统基本素养【处理器原理】https://blog.csdn.net/snowdenkeke/article/details/136662796我们已经知道了CPU的设计流程和工作原理&#xff0c;紧接着一个新问题…

游戏数据处理

游戏行业关键数据指标 ~ 总激活码发放量、总激活量、总登录账号数 激活率、激活登录率 激活率 激活量 / 安装量 激活率 激活量 / 激活码发放量 激活且登录率 激活且登录量 / 激活码激活量 激活且登录率应用场景 激活且登录率是非常常用的转化率指标之一&#xff0c;广泛…

DETR Doesn’t Need Multi-Scale or Locality Design

论文名称&#xff1a;PlainDetr 发表时间&#xff1a;ICCV2023 开源代码 作者及组织&#xff1a; Yutong Lin,Yuhui Yuan等&#xff0c;来自西安交大&#xff0c;微软亚洲研究院。 前言 自Detr以来&#xff0c;后续paper的改进的方向&#xff1a;主要是将归纳偏置重新又引入进…

如何实现sam(Segment Anything Model)|fastsam模型

sam是2023年提出的一个在图像分割领域的大模型&#xff0c;其具备了对任意现实数据的分割能力&#xff0c;其论文的介绍可以参考 https://hpg123.blog.csdn.net/article/details/131137939&#xff0c;sam的亮点在于提出一种工作模式&#xff0c;同时将多形式的prompt集成到了语…

清华把大模型用于城市规划,回龙观和大红门地区成研究对象

引言&#xff1a;参与式城市规划的新篇章 随着城市化的不断推进&#xff0c;传统的城市规划方法面临着越来越多的挑战。这些方法往往需要大量的时间和人力&#xff0c;且严重依赖于经验丰富的城市规划师。为了应对这些挑战&#xff0c;参与式城市规划应运而生&#xff0c;它强…

短剧在线搜索源码(全网首发)

一个非常哇塞的在线短剧搜索页面&#xff0c;接口已经对接好了&#xff0c;上传源码到服务器解压就能直接用&#xff0c;有能力的可以自己改接口自己写自己的接口 接口文档地址&#xff1a;doc.djcat.sbs 源码下载地址&#xff1a;https://pan.xunlei.com/s/VNstN8C6N3VK1a1k…

《OWASP TOP10漏洞》

0x01 弱口令 产生原因 与个人习惯和安全意识相关&#xff0c;为了避免忘记密码&#xff0c;使用一个非常容易记住 的密码&#xff0c;或者是直接采用系统的默认密码等。 危害 通过弱口令&#xff0c;攻击者可以进入后台修改资料&#xff0c;进入金融系统盗取钱财&#xff0…

【算法与数据结构】队列的实现详解

文章目录 &#x1f4dd;队列的概念及结构&#x1f320; 队列的顺序实现&#x1f309;初始化&#x1f320;入队&#x1f309;出队&#x1f320;获取队列首元素&#x1f309;获取队列尾部元素&#x1f320;获取队列中有效元素个数&#x1f309; 队列是否为空&#x1f320;查看队列…

二分查找的理解及应用场景。

一、是什么 在计算机科学中&#xff0c;二分查找算法&#xff0c;也称折半搜索算法&#xff0c;是一种在有序数组中查找某一特定元素的搜索算法 想要应用二分查找法&#xff0c;则这一堆数应有如下特性&#xff1a; 存储在数组中有序排序 搜索过程从数组的中间元素开始&…

【典】dp背包问题(树求方案)

回顾在acw上做过的题 有依赖的背包问题 这一题是与树相关的dp问题&#xff0c;根据父节点与子节点的相连关系&#xff0c;我们用dfs来处理根节点与子树的迭代更新&#xff0c;把每一颗最小单位子树看成一个物品&#xff0c;然后就有点像多重背包&#xff08;因为有体积限制&…

云计算 3月12号 (PEX)

什么是PXE&#xff1f; PXE&#xff0c;全名Pre-boot Execution Environment&#xff0c;预启动执行环境&#xff1b; 通过网络接口启动计算机&#xff0c;不依赖本地存储设备&#xff08;如硬盘&#xff09;或本地已安装的操作系统&#xff1b; 由Intel和Systemsoft公司于199…

【vue在主页中点击主页面如何弹出一个指定某个页面的窗口】

【vue在主页中点击主页面跳转到某个页面的操作完整过程】 1.首先在主页面中加入一个卡槽用于展示弹出的窗口 代码如下&#xff1a; <el-dialog :visible.sync"dialogVisible1" :close-on-click-modal"false" :title"title" class"dial…

关于tcp协议

目录 前言&#xff1a; 一、TCP协议的基本概念&#xff1a; 二、TCP协议的主要特点&#xff1a; 2.1面向连接&#xff1a; 2.2可靠传输&#xff1a; 2.3基于字节流&#xff1a; 三、TCP连接的建立与终止&#xff1a; 3.1连接建立&#xff1a; 3.1.1SYN&#xff1a; 3…

资产管理系统建设方案参考

1系统概述 软件开发全套文档下载、源码下载&#xff1a;软件项目开发全套文档下载_软件开发文档下载-CSDN博客 1.1需求描述 1. 实现公司内部固定资产管理全生命周期管理&#xff0c;包括资产采购、资产入库、资产领用、资产借用、资产归还、资产报废、资产维修、资产调拨等全…

RC522刷卡电路设计及程序

一、RC522刷卡电路组成 基于RC522的刷卡电路如上图所示。该电路组成主要分为三部分&#xff1a; Receiving Circuit&#xff1a;接收电路&#xff0c;接收卡发送的数据。 Filtering Impedence-Transtorm circuit:滤波和阻抗变换电路&#xff0c;抑制高次谐波并优化到读卡器天线…

Python使用lxml解析XML格式化数据

Python使用lxml解析XML格式化数据 1. 效果图2. 源代码参考 方法一&#xff1a;无脑读取文件&#xff0c;遇到有关键词的行再去解析获取值 方法二&#xff1a;利用lxml等库&#xff0c;解析格式化数据&#xff0c;批量获取标签及其值 这篇博客介绍第2种办法&#xff0c;以菜鸟教…

【AI大模型应用开发】【LangChain系列】9. 实用技巧:大模型的流式输出在 OpenAI 和 LangChain 中的使用

大家好&#xff0c;我是同学小张&#xff0c;日常分享AI知识和实战案例欢迎 点赞 关注 &#x1f44f;&#xff0c;持续学习&#xff0c;持续干货输出。v: jasper_8017 一起交流&#x1f4ac;&#xff0c;一起进步&#x1f4aa;。微信公众号也可搜【同学小张】 &#x1f64f; 本…

Linux环境(Ubuntu)上搭建MQTT服务器(EMQX )

目录 概述 1 认识EMQX 1.1 EMQX 简介 1.2 EMQX 版本类型 2 Ubuntu搭建EMQX 平台 2.1 下载和安装 2.1.1 下载 2.1.2 安装 2.2 查看运行端口 3 运行Dashboard 管理控制台 3.1 查看Ubuntu上的防火墙 3.2 运行Dashboard 管理控制台 概述 本文主要介绍EMQX 的一些内容&a…