需求：获取元素的样式并且修改元素样式
操作主要分为如下几个部分，文章最后附完整的代码框架
①在要操作的元素上绑定ref
②在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官方文档
完整操作示例代码：
相关文章
Vue组件的基本结构是什么？template和script如何配合工作？
Vue 3 和 Vue 2 的核心区别有哪些
Vue3和Element-Plus如何实现多级联动
vue时间选择器怎么设置
vue3比vue2好在哪里
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
更多热门AI工具
