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官方文档


ece1bc2dc1714d99ab4f042e28972a92.png

完整操作示例代码:

<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>

如有问题可私信博主

相关文章
|
8天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
22 1
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
vue3+ts+elementplus写一个登录页面教程
【6月更文挑战第3天】本文介绍了如何使用 Vue 3 和 TypeScript 创建一个登录页面。首先,需安装 Vue CLI,然后创建新项目并启用 TypeScript 支持。接着,创建 `Login.vue` 组件,设计登录表单,包括用户账号、密码和验证码字段,并实现相关验证规则。页面样式包括背景、登录框和按钮等元素的布局与样式。最后,展示了`&lt;script&gt;`部分的代码,包括表单验证逻辑、生成验证码的函数以及登录提交处理。文章还提供了一个登录页面的截图和完整代码示例。
31 1
|
8天前
|
JavaScript API
vue3+element实现一个公告面板
vue3+element实现一个公告面板
36 0
vue3+element plus图片预览点击按钮直接显示图片的预览形式
vue3+element plus图片预览点击按钮直接显示图片的预览形式
|
9天前
|
存储 JavaScript 前端开发
vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间
vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间
|
2天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
15 0
|
2天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
12 2
|
2天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
8 3