AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

解决在VUE3项目中无法更改dom元素的样式问题

2023-06-20 677
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 解决在VUE3项目中无法更改dom元素的样式问题

bug小记


最近写项目需要动态更新dom元素的的背景样式，于是准备用ref来绑定dom，从而修改样式


1687268024240.png


一开始我是这么写的


1687268030745.png


结果发现会报错


Cannot set properties of undefined (setting 'background')


1687268036446.png


结果发现需要$el才能获取dom结点，问题解决。



文章标签：
JavaScript
关键词：
项目dom
我想giao啊
目录
相关文章
卓伊凡
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
卓伊凡
801 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
卓伊凡
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
卓伊凡
598 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
卓伊凡
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
卓伊凡
774 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
卓伊凡
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
卓伊凡
709 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
34789737
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入，动态渲染进度段，支持动画效果和内容展示。当进度超出总长时，超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤（包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示），并提供了使用示例。通过此组件，开发者可根据项目需求灵活展示进度情况，优化用户体验。资源地址：[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
34789737
628 0
勿入红尘啊
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置？
Pinia 如何在 Vue 3 项目中进行安装和配置？
勿入红尘啊
1416 4
小华同学ai
|
监控 JavaScript 前端开发
ry-vue-flowable-xg：震撼来袭！这款基于 Vue 和 Flowable 的企业级工程项目管理项目，你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台，免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求，提供流程设计、部署、监控和任务管理等功能，适用于企业办公、生产制造、金融服务等多个场景，助力企业提升效率与竞争力。
小华同学ai
1158 12
游客44yag4ft7nckq
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
218 6
游客44yag4ft7nckq
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
游客44yag4ft7nckq
138 7
游客44yag4ft7nckq
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中，文档中的所有内容都被视为节点。整个文档是一个文档节点，每个 HTML 元素是元素节点，元素内的文本是文本节点，属性是属性节点，注释是注释节点。DOM 将文档表示为节点树，节点之间有父子和同胞关系。
游客44yag4ft7nckq
424 3

热门文章

最新文章

  • 1
    VUE之vxe-table高级表格（表格内增删改、导入、导出、自定义打印、列设置隐藏显示等）用法
  • 2
    vue仿微信界面聊天室项目|vue聊天案例
  • 3
    【ECS初体验】部署Vue静态项目
  • 4
    Vue3输入框（Input）
  • 5
    vue,uniapp生成二维码
  • 6
    前端组件之Bootstrap与Ant design of Vue
  • 7
    Vue 3中的Proxy
  • 8
    Vue3折叠面板（Collapse）
  • 9
    Vue.js hello world
  • 10
    Vue 结合html2canvas和jsPDF实现html页面转pdf
  • 1
    用深度学习提升DOM解析——自动提取页面关键区块
    545
  • 2
    虚拟DOM如何帮助提升性能的分析
    315
  • 3
    深度学习在DOM解析中的应用：自动识别页面关键内容区块
    532
  • 4
    JavaScript中通过array.map(）实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等，array.map(）的使用详解（附实际应用代码）
    794
  • 5
    Vue 3 中如何通过状态管理库来更新虚拟 DOM？
    421
  • 6
    在 Vue 3 中，除了 `markRaw` 和 `reactive` 结合，还有其他方式手动更新虚拟 DOM 吗？
    337
  • 7
    Vue 中如何手动更新虚拟 DOM？
    729
  • 8
    Vue 中的虚拟 DOM 是什么，以及它是如何工作的。
    485
  • 9
    JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用
    1184
  • 10
    虚拟 DOM 如何提高应用的性能？
    447

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 低代码开发师（初级）实战教程
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！