vue中动态绑定class
我用的element-ui
primary默认是这个颜色,ui设计的是这个颜色
所以我们先要重写
.el-button--primary的样式

因为默认是没有勾选的所有事灰色所以下面重写样式为灰色
.el-button--primary {
color: #fff;
background-color: gainsboro;
border-color: gainsboro;
}
有一点我想不通,就是通过是否被选中来改变这个.el-button--primary或者说动态绑定这个类



通过计算属性来实现是否能点击
因为之前我都是写在,所以我没想通
<style scoped lang="less">
.el-button--primary {
color: #fff;
background-color: gainsboro;
border-color: gainsboro;
}
</style> 现在想通了 另外写一个类来实现动态绑定

其实就是重写类的时候,另外起一个style 然后就是动态绑定
vue中动态绑定class的更多相关文章
- vue 中动态绑定class 和 style的方法
先列举一些例子 :class="['content',{'radioModel':checkType}]" :class="['siteAppListDirNode',{ ...
- Vue.js 动态绑定class
Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新 ...
- Vue 中动态添加class(使用v-bind:class)
今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...
- vue中引用swiper轮播插件
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
- 使用slot-scope复制vue中slot内容
有时候我们的vue组件需要复制使用者传递的内容. 比如我们工程里面的轮播组件需要使用复制的slot来达到循环滚动的效果 使用者关注轮播内容的静态效果,组件负责让其滚动起来 组件: <div cl ...
- vue中excel导入导出组件
vue中导入导出excel,并根据后台返回类型进行判断,导入到数据库中 功能:实现js导入导出excel,并且对导入的excel进行展示,当excel标题名称和数据库的名称标题匹配时,则对应列导入的数 ...
- 深刻理解Vue中的组件
转载:https://segmentfault.com/a/1190000010527064 --20更新: Vue2.6已经更新了关于内容插槽和作用域插槽的API和用法,为了不误导大家,我把插槽的内 ...
- 在Vue中使用JSX,很easy的
摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...
随机推荐
- 百度云曲显平:AIOps时代下如何用运维数据系统性地解决运维问题?
百度云智能运维负责人 曲显平 本文是根据百度云智能运维负责人曲显平10月20日在msup携手魅族.Flyme.百度云主办的第十三期魅族技术开放日<百度云智能运维实践>演讲中的分享内容整理而 ...
- 网卡配置文件详解 用户管理与文件权限篇 文件与目录权限 软连接 tar解压命令 killall命令 linux防火墙 dns解析设置 计划任务crond服务 软件包安装 阿里云 yum源 安装
Linux系统基础优化及常用命令 Linux基础系统优化 引言没有,只有一张图. Linux的网络功能相当强悍,一时之间我们无法了解所有的网络命令,在配置服务器基础环境时,先了解下网络参数设定命令. ...
- 深度学习中将类别标签映射到one_hot向量
有时我们的样本标签,都是标记从0开始直至到类别的个数.在模型训练的时候,这些标签需要变成one_hot向量,这样才能够跟softmax出来的概率做互熵损失,计算loss. 那么,映射的方法如下: de ...
- typedef define typedef可以使程序参数化,提高程序的可移植性。
小结: 1. typedef并没有创建一个新类型,它只是为某个已存在的类型增加了一个新的名称而已: 2. typedef声明也没有证据新的语义:通过这种方式声明的变量与通过普通方式声明的变量具有完全相 ...
- AutoMapper介绍(未完待续、部分没实现)
实体间转换工具.其实也可以用Json来实现同名属性.异名属性(用JsonProperty指明)的自动转换 最新版本6.11 需要使用vs2013以上.vs2012下载新版 nuget会遇到问题.只能旧 ...
- [development][endian] 字节序
首先字节序很不好理解, 其次,理解了又不好记住. 除了字节序, 还有位序. 那么到底怎么记住呢? 大端序,小端序还有另一个名字, 大尾序,小尾序. 这样就记住了, 我们以16进制打印一个数之后, 尾部 ...
- Nessus离线安装及升级插件
最近做客户的内网主机漏洞扫描,申请了一台内网主机做扫描服务器,安装Nessus.由于客户严格限制内网主机不能开通外网访问权限,折腾了一下Nessus离线激活和离线更新漏洞插件,详细过程截图记录. 一. ...
- 2018/04/24 PHP 设计模式之注册树模式
之前学习了工厂模式和单例模式,明白了他们的意义. 但是我们在之后的使用中会发现一个问题,在新建一个实例的时候还是需要调用一个单例或者工厂,之后还是造成了代码和耦合和不好处理. 下面开始说一下: -- ...
- 前端 HTML body标签相关内容 常用标签 分割线 <hr>
分割线 <hr> <hr>标签用来在HTML页面中创建水平分隔线,通常用来分隔内容 <!DOCTYPE html> <html lang="en&q ...
- 前端 HTML 常用标签 head标签相关内容 meta标签
meta标签 Meta标签介绍: <meta>元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词. <meta>标签位于文档的 ...