需求:获取元素的样式并且修改元素样式操作主要分为如下几个部分,文章最后附完整的代码框架①在要操作的元素上绑定ref<div ref='div' style='width:'50px'>②在
需求:获取元素的样式并且修改元素样式
操作主要分为如下几个部分,文章最后附完整的代码框架
①在要操作的元素上绑定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怎么获取元素并且修改元素样式的详细内容,更多请关注编程网其它相关文章!
--结束END--
本文标题: vue3怎么获取元素并且修改元素样式
本文链接: https://www.lsjlt.com/news/212505.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0