vue动态设置组件样式

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)

(0)

相关推荐

  • Vue 打包后自定义样式无法覆盖elementUI组件原有样式问题

    开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https://nodejs.org/en/ 问题描述 如下为基于elementUI Dialog编写的一个组件,以np ...

  • PPT怎样设置背景样式

    在应用PPT软件制作课件时,有的时候我们可以通过设计功能进行背景样式的设置,那么具体该如何操作呢?下面就让小编来具体演示一下吧. 1.进入PPT主界面后,新创建一个幻灯片. 2.在菜单栏找到[设计]选 ...

  • word编辑自选图形视频:形状添加文字设置主题样式及外观效果

    word编辑自选图形视频|word形状添加文字视频|word形状主题样式视频|word形状外观效果视频 本视频教程由部落窝教育分享.

  • vba设置表格样式

    Sub 表格处理() '功能:光标在表格中处理当前表格:否则处理所有表格! Application.ScreenUpdating = False '关闭屏幕刷新 Application.Display ...

  • vue之父子组件间通信实例讲解(props、$ref、$emit)

    组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.那么组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref ...

  • Mac小技巧:Mac上如何设置字幕样式

    小编就给大家详细介绍一下Mac电脑设置字幕样式的具体操作方法,有需要的朋友欢迎参考操作哦!感兴趣的伙伴记得收藏哦. 具体方法如下 1.在苹果电脑程序坞打开[系统偏好设置]选项,如下图所示. 2.在系统 ...

  • 【Excel】根据关键字动态设置数据有效性下拉列表

    使用数据有效性设置的下拉列表中的数据选项,除了使用固定的选项内容,也可以使用动态数据选项.当选项较多时,如果下拉菜单能够根据输入的关键字来筛选出相关的项显示在下拉列表中,将更加便于数据输入. 如下图所 ...

  • (10条消息) 插入(Insert)SQL可动态设置字段属性

    如图:合理运用动态sql,也可随意控制插入字段信息,代码中只对appVersion和userMobile赋值, <insert id="insertDataPointInfo" ...

  • 超级变变变,动态云组件加载实践

    动态组件可以说在可视化配置系统中常用的组件,也是能够实现可视化中,实现组件的核心要点. ○ 背景 这篇是作者在公司做了活动架构升级后,产出的主文的前导篇,考虑到本文相对独立,因此抽离出单独成文. 题目 ...