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

vue3利用ref操作dom元素

  1. 绑定dom元素类型HTMLDivElement 可以操作dom元素时候显示代码提示。
  2. handleDom 函数被定义在了 onMounted 外面,这样可以确保它在模板渲染时是可访问的。
  3. onMounted 钩子保持为空,因为 Vue 会自动处理 ref 的更新,当组件挂载后 opop 将指向对应的 DOM 元素。
<template>
  <el-button @click="handledom()" type="primary">操作dom元素</el-button>
  <div ref="opop">我是dom元素</div>
</template> 

 
<script setup lang="ts" name="FSDSD_DSDS">
// 操作dom元素
const opop = ref<HTMLDivElement | null>(null);

const handledom = () => {
  if (opop.value) {
    console.log(opop.value.innerHTML);
    opop.value.style.color = 'red'
  }
};

onMounted(() => {
  // 确保DOM元素已经加载完成
});
</script>


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

相关文章:

  • web——upload-labs——第十二关——%00截断
  • 华为云租户网络-用的是隧道技术
  • ChromeDriver驱动下载地址更新(保持最新最全)
  • 【蓝桥杯备赛】深秋的苹果
  • pytest | 框架的简单使用
  • 李秀贤主演警匪片《蓝色霹雳火》
  • MySQL 的关键字
  • 高级 ECharts 技巧:自定义图表主题与样式
  • 详解Redis的AOF持久化方式以及aof日志重写配置以及对redis中的GEO地理位置数据类型命令的应用示例
  • 2023下半年软考网络规划
  • 【信号】信号的保存
  • ffmpeg面向对象-rtsp拉流相关对象
  • 为什么不写注释?写“为什么不”注释?
  • pdf删除一页怎么删除?5种方法详细讲解,pdf删除页面实用技巧分享!
  • 【iOS】push和present的区别
  • echarts 多个3D柱状图
  • Python爱心射线(完整代码)
  • git一个项目关联多个远程仓库
  • android 权限说明
  • Parasoft如何助力AUTOSAR C++合规测试
  • 力扣322-零钱兑换(Java详细题解)
  • 开源网安斩获CCIA中国网络安全创新创业大赛总决赛三等奖
  • iOS 18 RC 版本更新,为相机应用引入了“暂停录制视频”功能
  • 滑动窗口——优选算法
  • MySQL主从同步延时高问题排查
  • 省市县相关校验sql随笔