Vue 页面渲染完成后获取元素并修改其CSS样式

Vue.js中使用ref修改元素样式

最新推荐文章于 2024-10-11 16:05:49 发布

原创最新推荐文章于 2024-10-11 16:05:49 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue.js #javascript

工作中遇到的问题专栏收录该内容

1 篇文章

订阅专栏

1. 将所要获取的元素加入ref属性

<div slot="header" class="clearfix" ref="clearFix">
</div>

2.获取元素对象，并修改样式

methods: {
  changeStyle: function () {
    let headerElem = this.$refs.clearFix.parentNode
    headerElem.style.padding = '0px'
    headerElem.style.minHeight = '0px'
    headerElem.style.backgroundColor = '#008065'
  },
}

3.调用

mounted() {
    this.changeStyle()
},

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

子夕若晨

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue3 - 获取DOM元素并且修改元素样式示例源码，当点击一个元素（比如按钮、容器）需要用更改 style css 的样式（附带详细的功能示例及解决方案）

高级前端工程师

04-12

6007

vue3获取元素并修改元素样式，vue3.0点击修改元素的css样式，vue3怎么修改元素css属性，vue3动态的改变样式，vue3中动态style(动态修改伪元素样式)，Vue3获取DOM元素样式和样式更改示例，vue3通过ref获取dom元素并修改样式，Vue3中如何获取dom元素并修改样式，Vue3 动态修改dom样式，vue3获取dom元素节点并操作元素的样式，vue3.0 获取dom设置样式，Vue3获取DOM元素并修改属性的方法，vue3 怎么动态改变element内部dom元素的样式，vue

vue2 使用ref获取并操作DOM元素

全易

07-05

6623

获取元素的方法有很多，但在vue中最好用vue提供的方法：ref。如下图，给想要操作的标签一个属性ref，然后给个值（就是你起的名字，下面要通过这个名字获取，跟原生的方法中class、id似的) 起好名字后一定要去mounted钩子里操作，因为页面执行到这个钩子的时候已经渲染出DOM了。如下图：那么下载这个h3标签已经改成红色了 ...

参与评论您还未登录，请先登录后发表或查看评论

vue如何把一段html代码渲染到页面并改变样式

qq_44161722的博客

10-19

1355

给标签添加class类，注意style要开启局部样式，只在本组件生效，并且要使用sass。可以看到，渲染出来的图片过大。

vux 给元素动态添加css

weixin_30258027的博客

09-22

102

<template> <div class="jdtI" :style="{styleObj}"></div> </template> <script> data () { return { styleObj: { width: '', ...

父组件中通过$refs选择子组件中特定类名元素并修改其样式

Rome_z的博客

04-16

3191

刚开始是想通过父组件修改element-ui中的某个元素的样式。由于动态添加class不够方便，所以想通过$refs，根据类名选择出元素，做法如下 App.vue <template> <div> <Student ref="student"></Student> <button @click="changeColor">改变背景</button> </div> </template&gt

024：vue中动态添加ref，通过ref更改css

大剑师兰特的GIS世界

08-28

2496

在vue项目开发中，我们经常会通过ref来获取dom，更改其样式。这里我们是使用数组循环，动态的添加ref，在方法中，动态的ref的dom，点击一行后，更换这一行的dom的颜色。

VUE中使用ref修改css属性之borderBottom

Rebecca_tan_lang的博客

03-22

2346

<li ref="borderBottom"> <a href="javascript:;">我的资料</a> </li> <li ref="borderBottom1">|</li> <li ref="borderBottom2"> <a href="javascript:;">...

解决vue项目获取dom元素宽高总是不准确问题

10-15

总结来说，解决Vue项目中获取DOM元素宽高不准确的问题，关键在于正确使用`$nextTick`来确保DOM更新完成后再进行尺寸获取。同时，了解并灵活运用`ref`、DOM元素的各种尺寸属性以及`getComputedStyle`，能够帮助开发者...

ajax请求+vue.js渲染+页面加载的示例

10-18

上面的代码片段中，我们使用Vue的生命周期钩子函数`mounted`来在页面加载完成后调用数据获取方法`fetchData`。在`fetchData`方法中，我们通过AJAX请求从服务器获取订单数据，并在成功回调中将其赋值给Vue实例的`list...

vue获取元素并设置样式

05-01

然后在Vue实例中，就可以使用以下方式获取元素，并进行样式修改： this.$refs.myP.style.color = 'red'; 2. 使用计算属性： Vue还提供了一种计算属性（Computed property）的机制。当视图中的数据发生变化时，...

vue中改变css样式利用ref

qq_45465689的博客

07-15

7511

this.$refs.ref对应得名字.style.height = h +‘px’;

vue中修改css样式和添加CSS样式

10-11

1276

确实是一个强有力的工具。为了保持代码的整洁和可维护性，建议将所有与DOM相关的逻辑封装在一个单独的方法中，并尽量减少直接操作DOM的次数。此外，利用Vue的计算属性和侦听器也可以达到类似的效果，同时还能更好地遵循Vue的数据驱动原则。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。在Vue.js的应用开发中，我们经常会遇到需要动态修改DOM元素样式的情况。此示例中，我们监听了窗口大小的变化，并根据不同的屏幕宽度设置了不同的高度值。

关于vue页面样式元素修改的总结，根据chrome浏览器开发者模式以及VsCode去更改vue页面底层样式。

m0_71830837的博客

11-25

2194

今天做vue页面，发现到element-ui上面复制的代码，有一些看着很别扭，强迫症的想修改一下样式，比如下面这个多选框上面的单第一个不跟下面对齐我就很犯强迫症，当然这不只是这一个地方，很多时候我们也需要根据页面修改样式或者添加样式，那么我们以后要怎么举一反三的应对呢？我们直接打开chrome浏览器的开发者模式，对照上面的区域进行测试和修改。

Vue （十二）样式属性

喜欢历史的码农

03-26

1081

class="xxx"用来绑定动态的样式，可以在data、method里被使用。对象写法：绑定多个样式，个数确定、名字也确定，单需要动态决定用不用。写法：class="xxx" xxx可以是字符串、对象、数组。数组写法：绑定的样式个数不确定、名字也不确定。class="xxx" 用来指定固定的样式。2.class 固定写法和动态写法区分。字符串写法：类名不确定需要动态指定。2.class样式绑定。1.class 形式。