vue动态添加style样式

2023-11-20

注意:

  • 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize
  • 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff

【对象】

  • html :style="{ color: activeColor, fontSize: fontSize + 'px' }"

  • html :style="{color:(index==0?conFontColor:'#000')}"

【数组】

  • html :style="[baseStyles, overridingStyles]"
  • html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

【三目运算符】

  • html :style="{color:(index==0?conFontColor:'#000')}"
  • html :style="[{color:(index==0?conFontColor:'#000')
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue动态添加style样式 的相关文章

  • ReferenceError:找不到变量:需要

    我在加载时遇到问题node modules到我的网页之一 我已经安装了 npm node js 并且我想使用require 函数在我的网站上初始化 Firebase 我不知道为什么 但它抛出引用错误 ReferenceError 找不到变量
  • HTMLImageElement 作为 React Child 无效

    我正在尝试异步加载图像 并且仅在加载图像后才将其显示在 React 应用程序中 componentDidMount const img new Image img onload gt this setState originalImage
  • jQuery 中的 Javascript .files[0] 属性

    jQuery 中是否有与此语句等效的语句 var value document getElementById id files 0 使用附加 files 0 的标准 jQuery 选择器似乎不起作用 并且我找不到与 files 等效的 jQ
  • 在 MongoDB 中查找具有字符串 ID 数组的文档

    我有一个 id 字符串数组 我想将其与 find 函数一起使用 db companies find id in arr arr看起来像这样 563a2c60b511b7ff2c61e938 563a2c60b511b7ff2c61e8b7
  • 在 BIRT 中输入参数后更新数据集查询

    在 BIRT 报告设计中传递参数后 如何更改或更新数据集的查询 详细说明 我有一个如下所示的查询 WHERE 该参数标记可以保存不同的值 在用户输入参数后 它看起来像这样 例如 WHERE column name 1 or WHERE co
  • 将 Sweet Alert 弹出窗口添加到 React 组件中的按钮

    我为 Bootstrap 和 React 找到了这个完美的 Sweet Alert 模块 我在 Meteor 应用程序中使用它 http djorg83 github io react bootstrap sweetalert http d
  • 响应式网格布局框架[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何在 d3 js 中突出显示从根到选定节点的路径?

    我使用 d3 js 创建了一棵树 现在我创建了一个下拉菜单 其中包含树中所有节点的列表 现在 从下拉菜单中选择一个节点时 我想突出显示从根到该特定节点的路径 这个怎么做 首先创建一个 flatten 函数 它将分层数据变成一个 n 数组 f
  • ElectronJS ReferenceError:导航器未定义

    我正在尝试在电子上制作自定义标题栏 但是当我启动我的应用程序时 我遇到了 ReferenceError 导航器未定义 问题 请帮忙 这是我的 main js 中的代码片段 My Codes https i stack imgur com c
  • Ember.JS - 如何在同一页面中使用多个模型、控制器和视图?

    我主要了解 Ember JS 的基础知识 大多数示例实际上只处理单个控制器和模型以在页面上显示某些内容 我真的很想用 Ember 构建一个完整的 Web 应用程序 所以有人能告诉我如何组织和连接多个控制器 模型和视图到一个页面中吗 例如 如
  • 用数组反向查找对象

    假设我有一个这样的对象 resourceMap a 0 1 2 3 4 5 6 7 8 9 10 b 11 12 c 21 23 d 54 55 56 57 510 确定是否的最佳方法是什么resourceId 21将会 c 我们不知道钥匙
  • 使水平滚动条始终可见,即使底部不在视图中

    我将用一个片段来开始这个问题 该片段几乎显示了我想要完成的任务 wrapper overflow hidden display flex sidebar min width 200px background 333 color FFF co
  • 如何将 Browserify 与外部依赖项一起使用?

    我正在尝试慢慢地将 Browserify 引入我的网站 但我不想重写所有 js 也不希望 jquery 和其他库的重复实例与我的 Browserify 版本捆绑在一起 如果我构建将 jquery 列为外部依赖项的模块 那么如何将其指向我的全
  • 如何在网页上实现文件上传进度条?

    当用户将文件上传到我的网络应用程序时 我想显示比动画 gif 更有意义的内容 我还有哪些可能性 编辑 我正在使用 Net 但我不介意是否有人向我展示与平台无关的版本 如果您对这一切在客户端通常如何工作感兴趣 就是这样 所有解决方案都通过 J
  • 如何在 e2e AngularJS 测试中进行文件上传?

    在我的一种观点中 我有一个文件上传控件 它支持通过拖放或单击按钮后打开的标准文件对话框上传文件 How to do this in my e2e tests1 1 Just one of the two options will be en
  • WebRTC:通道、轨道和流与 RTP SSRC 和 RTP 会话之间的关系

    来自 Mozilla 网站 https developer mozilla org en US docs Web API Media Streams API https developer mozilla org en US docs We
  • React Native - 跨屏幕传递数据

    我遇到了一些麻烦react native应用程序 我不知道如何跨屏幕传递数据 我意识到还有其他类似的问题在 SO 上得到了回答 但是这些解决方案对我来说不起作用 我正在使用StackNavigator 这是我的设置App js file e
  • Django 与谷歌图表

    我试图让谷歌图表显示在我的页面上 但我不知道如何将值从 django 视图传递到 javascript 以便我可以绘制图表 姜戈代码 array Year Sales Expenses 2004 1000 400 2005 1170 460
  • Express.js Passport认证自动失败跳过策略

    UPDATE 我已将代码从护照本地注册内部移至单独的处理程序 并且运行良好 问题在于 Passport 和本地注册的使用 但我不知道为什么 我使用 Node js Express Passport 进行身份验证和注册设置 这是以前使用过的标
  • Restangular - _.contains() 不是一个函数

    如果您最近通过 Bower 更新了 Restangular 它将安装最新的 Lodash 新的 4 0 然而 这是一个问题 因为 Restangular Angular 现在会抛出错误 contains 不是函数 你怎么解决 解决方案非常简

随机推荐

  • react 上传文件(多选)功能入的坑

    1 这里报错是因为onChange的this指向不对 解决方法在constructor中写 this onChange this onChange bind this 或者在绑定事件的时候写 onChange this onChange b
  • Unity Animator 动画没切换

    恶魔射手 Survival Shooter 项目 有两个动画 一个是静止时的Idle 一个是走路时候的Move 如下图 设置好动画状态机后发现按方向键后还是Idle 没反应 而一直按着方向键后呢又动起来了 最后找到了真相 原来选中了 Has
  • 使用yolov7模型用VOC深度学习

    yolov7及VOC数据集 权重文件地址 bubbliiiing yolov7 pytorch 这是一个yolov7的库 可以用于训练自己的数据集 github com 在colab中 训练 1 voc annotation py 如果使用
  • Python 判断数组list是否为空

    前言 判断数组为空 是一个常见用法 Python与Java的方法不同 需区分 Python 方法 1 根据长度判断 长度为0时 表示空 其中 判断条件 成立时 非零 则执行后面的语句 lst if len lst print c else
  • 如何在mybatis 中传多个参数,如何在mybatis 中遍历 集合?

    如何在mybatis 中传多个参数 List getIdByRand Param question Question question Param sectionIdList List sectionIdList param 映射参数到 x
  • .NET的RulesEngine(规则引擎)使用

    本文目录 1 背景说明 1 1 规则引擎的使用场景 1 2 demo的代码说明 2 演示 2 1 入门demo演示 2 1 1 代码展示 2 1 2 代码下载 2 2 规则参数说明 2 2 1 第一部分参数说明 2 2 2 第二部分参数说明
  • 2021.9.5笔试题

    第一题 题目 找x y target 数字特别大 可能会溢出 代码 include
  • CPU 100%问题排查

    1 top c top c 命令找出当前进程的运行列表 按一下 P 可以按照CPU使用率进行排序 显示Java进程 PID 为 2609 的java进程消耗最高 2 top Hp pid 然后我们需要根据PID 查出CPU里面消耗最高的进程
  • sklearn的make_circles和make_moons生成数据

    关于make circles and make moons生成环形形状和月亮形状数据 转载来源 https blog csdn net dataningwei article details 53649330 make circles sk
  • ConcurrentHashMap源码解读

    曾经研究过jkd1 5新特性 其中ConcurrentHashMap就是其中之一 其特点 效率比Hashtable高 并发性比hashmap好 结合了两者的特点 集合是编程中最常用的数据结构 而谈到并发 几乎总是离不开集合这类高级数据结构的
  • 儿童计算机诈骗案例,妈妈用纸箱为4岁女儿做笔记本电脑走红 小孩子这么好骗吗?...

    原标题 妈妈用纸箱为4岁女儿做笔记本电脑走红 小孩子这么好骗吗 来源 游民星空 在全球大隔离的状态下 单身生活的人可能会感到孤独无聊 但是已经有孩子的家长可能逐渐的要抓狂了 每天精力旺盛的孩子们可能会吵的你无法在家工作甚至休息 于是就开始变
  • 百度飞桨图像分割七日打卡营学习笔记

    百度飞桨图像分割七日打卡营学习笔记 来源 飞桨图像分割教程 课程链接https aistudio baidu com aistudio course introduce 1767 1 语义分割概念 图像分割是计算机视觉中除了分类和检测外的另
  • java项目抠图功能实现

    java项目抠图功能 项目中需要一个上传文字签名并且抠掉背景图的功能 当初第一次听到这个需求时 差点惊掉下巴 我压根都不会觉得java里能实现这功能 但是既然客户需要 那就照办吧 经过这次功能的实现 我也更加坚定了一个想法 再奇葩的需求 也
  • win 11bitlocker恢复密匙一般情况的解决方式(这里指的是你现在使用的微软账户一直没有变更过)

    本来没有打算写这一篇解决帖子的 但是最近好多微博的友友都在私我询问解决方法 孩子虽然很热心 但是真的回复不过来了 打字太累了 这里给大家简单指个路 希望能够对大家有所帮助 当时出现这个问题的时候 一搜网上的解决方法都是重装系统什么的 真是吓
  • flink学习之state

    state作用 保留当前key的历史状态 state用法 ListState
  • 关于Socket通信客户端是否需要绑定端口号

    参见http blog chinaunix net uid 23193900 id 3199173 html 无连接的socket的客户端和服务端以及面向连接socket的服务端通过调用bind函数来配置本地信息 使用bind函数时 通过将
  • C++输出二进制数

    示例 include
  • Lattice Diamond安装

    1 下载 到Lattice官网 http www latticesemi com 注册一个lattice的账号后就可以去下载Diamond 登陆后如下图 根据自己系统情况选择对应的版本 我用的是32位win8 Diamond软件安装包和La
  • DenseFusion复现-可以在30系/40系显卡运行

    笔者电脑显卡为4060 因为使用DenseFusion作者pytorch1 0的代码没有成功 发现很多人在30系显卡上复现失败 经过查资料后发现是因为cuda版本与显卡算力不匹配 需要提高cuda版本 因此也需要提高pytorch版本 后来
  • vue动态添加style样式

    注意 凡是有 的style属性名都要变成驼峰式 比如font size要变成fontSize 除了绑定值 其他的属性名的值要用引号括起来 比如backgroundColor 00a2ff 而不是 backgroundColor 00a2ff