vue3获取元素并且修改元素样式的实战操作
更新时间：2023年04月03日 09:37:14 作者：前端小王hs
ref作为在vue里面我们获取元素最常用的一个api,在vue3迎来改造,下面这篇文章主要给大家介绍了关于vue3获取元素并且修改元素样式的相关资料,需要的朋友可以参考下
需求：获取元素的样式并且修改元素样式
主要应用场景：点击元素后样式变化
在项目开发中，经常会遇到一些改变样式的操作，不同于一般点击进行数字的变化，对样式的改变需要获取元素的style，笔者浏览了目前论坛上的些许文章，大部分都是基于vue2的操作，本篇博客叙述在vue3的条件下进行获取元素并修改样式，主要涉及的API有ref和nextTick
操作主要分为如下几个部分，文章最后附完整的代码框架
①在要操作的元素上绑定ref
<div ref='div' style='width:'50px'>
②在script部分导入ref和nextTick
import { ref,nextTick} from 'vue'
③在script部分使得要操作的元素响应式即绑定ref
const div = ref()
④利用async await和nextTick
//需要在元素绑定函数a 这里忽略
async function a () {
await nextTick()
div.value.style.width="100px"
难点是在于为什么要使用async await和nextTick
如果不这样使用的话，会报错：parameter 1 is not of type ‘Element’
这个报错的原因大意是操作者在操作还没渲染的元素，或者说是想要操作的样式还没有对应的元素出现
那我们学习了vue3之后，懂得在nextTick后Dom已经更新，所以通过结合async await和nextTick可以使得元素在渲染过后进行有效的修改
下图来自vue3官方文档
完整操作示例代码：
<template>
<div ref='div' style='width:'50px'>
</template>
<script setup>
import { ref,nextTick} from 'vue'
const div = ref()
async function a () {
await nextTick()
div.value.style.width="100px"
}
</script>
总结
到此这篇关于vue3获取元素并且修改元素样式的文章就介绍到这了,更多相关vue3获取元素并修改样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
virtualenv是一个创建隔绝的Python环境的工具。这篇文章主要介绍了python虚拟环境 virtualenv的简单使用，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
本篇文章主要介绍了vue.js根据代码运行环境选择baseurl的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
这篇文章主要介绍了详解vue-cli 3.0 build包太大导致首屏过长的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了Element实现表格分页数据选择+全选所有完善批量操作，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要介绍了Vue2.0实现组件之间数据交互和通信操作,结合实例形式分析了vue2.0组件之间通信的原理、实现方法及相关操作注意事项,需要的朋友可以参考下2019-05-05
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
这篇文章主要介绍了Vue 基于 vuedraggable 实现选中、拖拽、排序效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
移动端页面适配，rem和vw适配方案，本文主要介绍了vue项目中使用rem替换px的实现示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要介绍了Vue如何实现iframe的上一步、下一步操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
这篇文章主要介绍了用vue2.x版本+adminLTE开源框架 搭建后台应用模版，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要为大家介绍了如何利用Vue实现一个树形穿梭框，elementUI和ant-d组件库的穿梭框组件效果都不是很好，所以本文将利用一个新的插件来实现，需要的可以参考一下2022-04-04
最新评论