当前位置: 首页 > article >正文

vue如何获取一个元素的基本信息

PS:代码全部使用Vue3和setup语法糖来写的

首先准备

HTML结构

<template>
  <div class="main" ref="myElement"></div>
  <t-button @click="onClick"> 点击该元素的相关信息获取 </t-button>
</template>

Vue部分

<script setup>
import { onMounted, ref } from "vue";
const myElement = ref(null);
const onClick = () => {
  console.log('myElement.value.clientWidth='+ myElement.value.clientWidth);
  console.log(myElement);
};
</script>

注意!!!

这里,我们在实验的时候

假如说我们打印是一个myElement.value的形式,我们可以把该元素的DOM结构打印在我们的控制台上,但是我们想查看这元素的基本信息的时候,这里只需要打印这个定义的变量就好,这样一边看一遍获取自己想要的一些信息。


http://www.kler.cn/a/300211.html

相关文章:

  • Elasticsearch(ES)基础查询语法的使用
  • 项目中使用的是 FastJSON(com.alibaba:fastjson)JSON库
  • 【生产力工具】ChatGPT for Windows桌面版本安装教程
  • Oracle 深入学习 Part 14:Managing Password Security and Resources(管理密码安全性和资源)
  • 豆包升级了“眼睛”,看APP截图就能写代码了!超低价让多模态AI普惠
  • 深度学习 DAY2:Transformer(一部分)
  • 15 章 在微服务中服务众多如何实践他们复杂的依赖关系进行 helm安装
  • Robust Image Denoising through Adversarial Frequency Mixup
  • SPI驱动学习四(通过SPI操作外设模块)
  • QT作业3
  • SprinBoot+Vue宠物店管理系统的设计与实现
  • k8s笔记
  • Android - NDK: 在jni层生成java层对象,并调用java层的方法
  • C++ STL-deque容器入门详解
  • Android简易图片浏览器
  • 【CanMV K230 AI视觉】 人体检测
  • 使用ROS2 控制 Isaac Sim 中的机械臂运动
  • QQ频道机器人零基础开发详解(基于QQ官方机器人文档)[第三期]
  • Go-ecc加密解密详解与代码_ecdsa
  • mac安装spark
  • 算法知识点————双指针【删除重复元素】【反转链表】
  • Azure AI Search 中的二进制量化:优化存储和加快搜索速度
  • 简洁直白的github快速入门教程(云主机)
  • elementui Cascader 级联选择器的使用总结
  • 你真的懂吗系列——串口通信
  • uniapp ios sticky定位,内部 u-tabs(包含scroll-view)消失问题