vue中将新添加的div标签自动定位到可视区域内

可以结合使用Vue的ref和scrollIntoView()方法来实现

<template><div><button @click="addDiv">添加新的<div>标签</button><div ref="container" class="container"><div v-for="(item,index) in divs" :key="index" ref="divElement" class="div-element"><!-- 此处为动态添加的div内容 --></div></div></div>
</template>
<script>
export default {data() {return {divs: []};},methods: {addDiv() {this.divs.push({name:'小明'})this.$nextTick(() => {const divElement = this.$refs.divElement[this.$refs.divElement.length - 1]; //this.$refs.divElement.length - 1   取的是该数组中的最后一个if (divElement) {divElement.scrollIntoView({ behavior: 'smooth', block: 'end' });}});}}
};
</script>

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

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

相关文章

第61步 深度学习图像识别:多分类建模(TensorFlow)

基于WIN10的64位系统演示 一、写在前面 截至上期&#xff0c;我们一直都在做二分类的任务&#xff0c;无论是之前的机器学习任务&#xff0c;还是最近更新的图像分类任务。然而&#xff0c;在实际工作中&#xff0c;我们大概率需要进行多分类任务。例如肺部胸片可不仅仅能诊断…

基于Java+SpringBoot+Vue前后端分离图书电子商务网站设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

css滚动条的使用

前言&#xff1a; css滚动条的使用。 1、使用案例1&#xff1a;背景不要&#xff0c;只展示一个滚动条 如果是默认整体&#xff0c;::就够用了&#xff0c;如果是某个元素&#xff0c;可以 .abc:: ,如果是scss这种的 &:: ::-webkit-scrollbar {width: 6px; } ::-webkit…

【学习FreeRTOS】第20章——FreeRTOS内存管理

1.FreeRTOS内存管理简介 在使用 FreeRTOS 创建任务、队列、信号量等对象的时&#xff0c;一般都提供了两种方法&#xff1a; 动态方法创建&#xff1a;自动地从FreeRTOS管理的内存堆中申请创建对象所需的内存&#xff0c;并且在对象删除后&#xff0c;可将这块内存释放回Free…

使用威胁搜寻增加网络安全

什么是威胁搜寻 威胁搜寻&#xff08;也称为网络威胁搜寻&#xff09;是一种主动网络安全方法&#xff0c;涉及主动搜索隐藏的威胁&#xff0c;例如组织网络或系统内的高级持续性威胁和入侵指标。威胁搜寻的主要目标是检测和隔离可能绕过网络外围防御的威胁&#xff0c;使管理…

怎么把pdf转换成jpg格式?

怎么把pdf转换成jpg格式&#xff1f;在我们日常的办公过程中&#xff0c;PDF文件是一个经常被使用来传输文件的格式。它能够确保我们的文件内容不会混乱&#xff0c;并以更加完美的方式呈现出来。然而&#xff0c;PDF文件也存在一些缺陷。例如&#xff0c;它无法直接编辑&#…

BM3 链表中的节点每k个一组翻转

这个就是用栈&#xff0c;k个一组判断就好了 /*** struct ListNode {* int val;* struct ListNode *next;* ListNode(int x) : val(x), next(nullptr) {}* };*/ class Solution {public:/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回…

ubuntu设置系统代理

安装trojan等代理工具并配置启动&#xff0c;得到端口号 例如 10.10.1.10:8080系统代理设置 我们将在/etc/profile.d/proxy.sh下添加一个shell脚本文件&#xff0c;这将确保设置适用于所有已登录的用户&#xff1a; sudo vim /etc/profile.d/proxy.sh将以下内容写到文档中&…

学信息系统项目管理师第4版系列02_法律法规

1. 信息安全的法律体系可分为四个层面 1.1. 一般性法律法规&#xff0c;如宪法、国家安全法&#xff0c;国家秘密法 1.2. 规范和惩罚信息网络犯罪的法律&#xff0c;如刑法、《全国人大常委会关于维护互联网安全的决定》等 1.3. 直接针对信息安全的特别规定&#xff0c;如《…

Spring AOP 的实现及原理

目录 什么是 Spring AOP &#xff1f;AOP 是啥 ?Spring AOP 可以干啥 &#xff1f; AOP 的组成Spring AOP 的实现Spring AOP 的实现原理 什么是 Spring AOP &#xff1f; AOP 是啥 ? 我们知道 OOP 是面向对象编程, 那 AOP 又是啥呢 ? AOP&#xff08;Aspect Oriented Prog…

Qml中double转int类型

在QML中&#xff0c;你可以使用JavaScript的内置函数将double类型转化为int类型。 1.去尾法&#xff1a;使用Math.floor()函数可以将一个double类型的数值向下取整为最接近的整数&#xff0c;Math.floor()将一个double类型的数值去尾转换为int类型。例&#xff1a; var doubl…

华为OD-非严格递增连续数字序列

题目描述 输入一个字符串仅包含大小写字母和数字 求字符串中包含的最长的非严格递增连续数字序列长度 比如&#xff1a; 12234属于非严格递增数字序列 输入描述 输入一个字符串仅包含大小写字母和数字 输出描述 输出字符串中包含的最长的非严格递增连续数字序列长度 示例…

适应高速率网络设备的-2.5G/5G/10G网络变压器/网络滤波器介绍

Hqst盈盛&#xff08;华强盛&#xff09;电子导读&#xff1a;在高速发展的互联网/物联网时代&#xff0c;为满足高网速的网络数据传输需求&#xff0c;网络设备在制造中也要选用合适的网络变压器/滤波器产品&#xff0c;有哪些可供选择的高速率网络变压器产品也是广大采购人员…

jvs-rules(规则引擎)更新:新增功能介绍

jvs-rules更新内容 1.复合变量新增数据补充节点&#xff0c;实现请求回来的数据再以入参方式请求其他数据进行数据补充&#xff08;例如通过参数A&#xff0c;请求回数据B&#xff0c;再以数据B为入参&#xff0c;请求回数据C&#xff09; 2.规则流结束节点支持新增、新建、引…

基于jeecg-boot的flowable流程跳转功能实现

更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; https://gitee.com/nbacheng/nbcio-boot 前端代码&#xff1a;https://gitee.com/nbacheng/nbcio-vue.git 在线演示&#xff08;包括H5&#xff09; &#xff1a; http://122.227.135.243:9888 今天我…

【Linux】权限

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;题目大解析3 目录 &#x1f449;&#x1f3fb;shell命令解释器&#x1f449;&#x1f3fb;Linux用户…

【Java】【Stream流】分页

在Java开发中&#xff0c;使用Java自带Stream流的API来进行开发是一种常见的做法。 下面是一个简单的例子&#xff1a; 假设我们有一个包含100个数据项的列表。我们需要按照每页10个数据进行分页&#xff0c;并返回指定页码的数据。可以使用Java 8中的流来实现分页&#xff1…

使用 AutoGPTQ 和 transformers 让大语言模型更轻量化

大语言模型在理解和生成人类水平的文字方面所展现出的非凡能力&#xff0c;正在许多领域带来应用上的革新。然而&#xff0c;在消费级硬件上训练和部署大语言模型的需求也变得越来越难以满足。 &#x1f917; Hugging Face 的核心使命是 让优秀的机器学习普惠化 &#xff0c;而…

Mysql45讲学习笔记

前言&#xff1a;这篇文章主要总结事务&#xff0c;锁、索引的一些知识点&#xff0c;然后分享一下自己学习小心得&#xff0c;我会从点到线在到面展开说说&#xff0c;对于学习任何知识&#xff0c;我们都应该藐其全貌&#xff0c;不要一开始就选入细节 基础 一、基础架构&a…

基于ssm+vue德云社票务系统源码和论文

基于ssmvue德云社票务系统源码和论文063 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 1.选题的依据和意义 互联网时代&#xff0c;随着生活节奏的加快和不断上升的压力&#xff0c;人们急需寻找到情绪的宣泄…