style 标签中动态设置颜色

【需求描述】

主题颜色存在$store中，动态使得部分文字跟随主题颜色

【实现效果】

（主题颜色为蓝色，文字颜色跟随主题）

（主题颜色为紫色，文字颜色跟随主题）

【实现方式】

1、从项目中取出获得到的主题颜色。

2、与需要对应颜色的文字的标签style绑定使用。

【代码】

<template> <div><a-tag :color="tagColor" v-for="(r,index) in roles" :key="index">{{ r }}</a-tag></div>
</template>

<script>
export default {name: 'Logout',computed: {tagColor () {return this.$store.getters.color}},data () {return {roles: ['系统管理员','项目管理员']}},methods: {},mounted () {}
}
</script>

【color必须写在style中的做法】

<div class="model" :style="{'background-color': tagColor}">

style 标签中动态设置颜色相关推荐

vue修改meta值_vue中动态设置meta标签和title标签的方法
vue中动态设置meta标签和title标签的方法因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...
vue如何在style标签中使用data响应式数据？
文章目录一.面临到的需求? 二.如何在css中使用变量? 三.vue如何在style标签中使用data响应式数据? 一.面临到的需求? 首先我们知道css对应是有伪类的,如:hover, :acti ...
vue中动态设置背景渐变色
vue中动态设置背景渐变色 1.效果展示 2.核心(动态更换单一的背景颜色也可以使用) <div class="ss" v-bind:style="{ backgr ...
jsp select初始化赋值_分别在javascript和JSP中动态设置下拉列表默认值
一.JavaScript中动态设置select标签中选项的默认值: 比如,要完成下边这个下拉列表的动态显示,并且当进行前后翻页时,下拉列表中的值自动更新为当前页码: 图1 jsp部分代码如下: 图2 ...
在style标签中，vue项目引入style文件，外部css文件
在style标签中,vue项目引入style文件,外部css文件一.css是什么? 二.使用步骤 1.使用style标签引入 2.在style标签内使用@import导入总结一.css是什么? ...
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法参考文章: (1)微信小程序首页index.js获取不到app.js中动态设置的globalDat ...
Quartz在Spring中动态设置cronExpression
什么是动态定时任务:是由客户制定生成的,服务端只知道该去执行什么任务,但任务的定时是不确定的(是由客户制定). 这样总不能修改配置文件每定制个定时任务就增加一个trigger吧,即便允许客户修改配置文 ...
Quartz在Spring中动态设置cronExpression （spring设置动态定时任务）
2019独角兽企业重金招聘Python工程师标准>>> 什么是动态定时任务:是由客户制定生成的,服务端只知道该去执行什么任务,但任务的定时是不确定的(是由客户制定). 这样总不能修改 ...
style标签中的几个属性
1.vue中使用css通常采用如下形式 <style lang="scss" scoped></style> 2.lang="scss" ...

style 标签中动态设置颜色

style 标签中动态设置颜色相关推荐

最新文章

热门文章