vue3怎么获取元素并且修改元素样式

这篇文章主要介绍“vue3怎么获取元素并且修改元素样式”，在日常操作中，相信很多人在vue3怎么获取元素并且修改元素样式问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue3怎么获取元素并且修改元素样式”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

需求：获取元素的样式并且修改元素样式

操作主要分为如下几个部分，文章最后附完整的代码框架

①在要操作的元素上绑定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怎么获取元素并且修改元素样式”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！