vue style行内样式引用变量

于 2024-05-09 20:43:36 发布
阅读量212 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wnk1997/article/details/138630852
版权

如下即可，style需要套一层{}
XXXX就是typeMap对象里面的aaa或者bbb

<div class="custom-icon" :style="{ background: typeMap[XXXX]?.background }">        
</div>

const typeMap = {
  'aaa': {
    icon: 'icon-aaaa',
    background: 'rgba(111,111,111,0.11)',
    color: '#ffffff',
  },
  'bbbb': {
    icon: 'icon-bbbb',
    background: 'rgba(222,222,222,0.22)',
    color: '#aaaaaa',
  },
};
爱学习的小康
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2/vue3 js变量在＜style＞标签中使用
xihadddd的博客
03-28 1031
此处为scss使用方法。
前端面试题vue，css.,javascript
02-02
- **行内样式:** 如 `<div style="color:red;">`。 - **ID 选择器:** 如 `#uniqueId`。 - **类选择器、属性选择器、伪类选择器:** 如 `.className`, `[attribute=value]`, `:hover`。 - **元素选择器、伪元素...
vue 在style标签中使用变量
wsy的博客
11-28 3577
vue 在style标签中使用变量
style 行内动态变量样式
qq_33225414的博客
02-27 228
【代码】style 行内动态变量样式。
如何在CSS中写变量？一文带你了解前端样式利器
06-27 4532
引言 前端的变量写法大致可以分为三大类，分别是CSS-in-JS，CSS预处理器，和CSS原生变量。作为前端开发人员，我们应该了解并善用它们，以便实现更加灵活、可维护的样式。本篇文章将与大家分享一下原生CSS的变量写法 概念 CSS变量也叫自定义属性，在它出现之前，CSS中使用的值通常是硬编码的（静态编写），这导致了样式代码的重复和冗余，在管理和维护大型项目时存在一些困扰和隐患
vue 如何在 style 标签里使用变量（数据）
左不言的博客
07-01 1万+
vue 如何在 style 标签里使用变量（数据） vue 如何在 代码中使用 style 属性 vue 如何在 html 中使用 style 属性
vue如何在css样式种使用data中的变量
wu_yans的博客
02-18 2329
vue中实现了在样式里使用js变量的方法，及通过css定义变量的方式，将变量在行内注入，然后在style中使用var()获取我们在行内设置的数据即可。
vue.js实现照片放大功能
10-15
在`style`部分，组件的样式使用Stylus编写，设置了组件的基本布局和元素样式。例如，`.image-cell__wrapper`设置为相对定位，`.image-wrapper`中的图片设置为行内块元素并绝对定位，以便在点击或悬停时可以平滑地...
vue_web_ware:vue一些组件、方法、模板、样式
05-15
4. **Vue样式**：Vue允许我们在组件内管理样式，可以使用行内样式、类名绑定或使用CSS预处理器（如Sass或Less）。在`<style>`标签中，我们可以看到如何使用 scoped 属性来限制样式的应用范围，确保组件样式不会影响...
2024年最新前端面试题总结(HTML5+CSS3+JS+TS4+Vue+React18)
最新发布
03-05
- **外部样式表**：通过`<link>`标签引用的独立CSS文件。 #### 5. margin 计算 在CSS中，`margin`属性用于设置元素的外边距。需要注意的是，当两个垂直相邻的外边距相遇时，会发生**外边距合并**现象。这意味着，...
udacity-personal-blog：一个udacity纳米项目，展示我利用HTML和CSS技能构建个人博客网站的能力，包括自定义图像，布局和样式
02-18
- 样式可以写在内部样式表（`<style>`标签内）、外部样式表（`.css`文件）或行内样式（`style`属性）中。 - 常用的CSS属性有颜色（`color`）、背景（`background`）、字体（`font-family`、`font-size`）、边距（`...
Ant Design Vue使用rowClassName实现行内样式根据变量的变化而改变！
dsgjava的博客
04-06 2808
需求 测试表格 当检验状态变为检测中时，行内文字变为灰色，背景颜色变为红色色 思路 基本逻辑判断，当数据满足条件时使用rowClassName给<a-table>增加类名，然后设置相应样式 代码 首先给<atable>设置属性:rowClassName="setRowClassName" <a-table :key="1" ref="table" size="middle" bor
React技巧之设置行内样式
qq_44980680的博客
10-08 5047
React技巧之设置行内样式
Vue 在＜style＞中使用变量
weixin_45586038的博客
04-27 6923
前景：在我们编写css样式中，是不能使用vue data中的变量的。那么如果我们想在css中使用全局变量，怎么做呢？ 如下 1. 第一步，给style赋值一个计算属性 <div :style="uploadStyle" class="upload-box"/> 2. 第二步，computed中定义uploadStyle computed: { ...mapState({ theme: state => state.settings.theme .
vue 在scss中使用js变量值
热门推荐
卿本无忧的博客
08-12 1万+
vue 在scss中使用js变量值 js修改scss的变量值
vue2 style行内样式绑定
07-28
在Vue2中，你可以使用v-bind指令将样式绑定到HTML元素上。对于行内样式，你可以使用对象语法或数组语法。 1. 对象语法： 你可以在data中定义一个样式对象，然后将其绑定到元素的style属性上。 ```html <template> <div :style="myStyleObject">Hello Vue!</div> </template> <script> export default { data() { return { myStyleObject: { color: 'red', fontSize: '20px' } } } } </script> ``` 在这个例子中，div元素的文本颜色将被设置为红色，字体大小为20像素。 2. 数组语法： 你可以使用数组语法将多个样式对象绑定到元素的style属性上。 ```html <template> <div :style="[myStyleObject, myOtherStyleObject]">Hello Vue!</div> </template> <script> export default { data() { return { myStyleObject: { color: 'red' }, myOtherStyleObject: { fontSize: '20px' } } } } </script> ``` 在这个例子中，div元素将应用myStyleObject和myOtherStyleObject中定义的样式。 请注意，在绑定样式时，属性名需要使用驼峰命名法（例如fontSize），而不是短横线分隔命名法（例如font-size）。 希望这可以帮助到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值