vue动态设置组件样式

  • A+
所属分类:Web前端
摘要

vue3.0中,动态设置组件样式:
在父组件中动态设置子组件(自定义组件)样式?
1.通过props设置v-bind:style 来实现,不具体些了,这个很简单,但是如果是改变某个class里的某一个样式呢?并且这个class也是个动态绑定的,这种方法就不适用了。
另外,props接受到的属性,无法直接传入vue里的style部分,vue3.0的语法是v-bind()直接用,只能是data里定义的,不能是props传入的。
2.给顶层容器ref值
通过在mounted函数中this.$refs.值.style.setProperty(“–mystyle”,props),直接给这个–mystyle变量设置值
在style部分直接使用var(–mystyle)

vue3.0中,动态设置组件样式:
在父组件中动态设置子组件(自定义组件)样式?
1.通过props设置v-bind:style 来实现,不具体些了,这个很简单,但是如果是改变某个class里的某一个样式呢?并且这个class也是个动态绑定的,这种方法就不适用了。
另外,props接受到的属性,无法直接传入vue里的style部分,vue3.0的语法是v-bind()直接用,只能是data里定义的,不能是props传入的。
2.给顶层容器ref值
通过在mounted函数中this.$refs.值.style.setProperty("--mystyle",props),直接给这个--mystyle变量设置值
在style部分直接使用var(--mystyle)