我用的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的更多相关文章

  1. vue 中动态绑定class 和 style的方法

    先列举一些例子 :class="['content',{'radioModel':checkType}]" :class="['siteAppListDirNode',{ ...

  2. Vue.js 动态绑定class

    Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新 ...

  3. Vue 中动态添加class(使用v-bind:class)

    今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...

  4. vue中引用swiper轮播插件

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...

  5. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  6. 使用slot-scope复制vue中slot内容

    有时候我们的vue组件需要复制使用者传递的内容. 比如我们工程里面的轮播组件需要使用复制的slot来达到循环滚动的效果 使用者关注轮播内容的静态效果,组件负责让其滚动起来 组件: <div cl ...

  7. vue中excel导入导出组件

    vue中导入导出excel,并根据后台返回类型进行判断,导入到数据库中 功能:实现js导入导出excel,并且对导入的excel进行展示,当excel标题名称和数据库的名称标题匹配时,则对应列导入的数 ...

  8. 深刻理解Vue中的组件

    转载:https://segmentfault.com/a/1190000010527064 --20更新: Vue2.6已经更新了关于内容插槽和作用域插槽的API和用法,为了不误导大家,我把插槽的内 ...

  9. 在Vue中使用JSX,很easy的

    摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...

随机推荐

  1. docker swarm 英文参考资料阅读列表

    将自己在使用 docker swarm 过程中阅读的英文参考资料收集在这篇博文中,便于以后查阅与温习,顺带分享. 2017年8月5日之前阅读 My experience with Docker Swa ...

  2. GMM-实现聚类的代码示例

    Matlab 代码: % GMM code function varargout = gmm(X, K_or_centroids) % input X:N-by-D data matrix % inp ...

  3. C和C指针小记(十)-函数

    1.函数的定义 函数的定义就是函数体的实现. 语法: 类型 函数名(形式参数) 代码块 函数返回类型和函数名分开写是代码风格的问题,现代语言如swift返回值在函数名和参数表的后面,这样使得某些工程工 ...

  4. C# RichTextBox的用法

    https://www.cnblogs.com/arxive/p/5725570.html

  5. c#如何调用另外一个项目的类

    添加引用即可. 参考资料: https://zhidao.baidu.com/question/241402877.html http://blog.csdn.net/a1027/article/de ...

  6. Microsoft .NET Framework

    Microsoft .NET Framework是用于Windows的新托管代码编程模型.它将强大的功能与新技术结合起来,用于构建具有视觉上引人注目的用户体验的应用程序,实现跨技术边界的无缝通信,并且 ...

  7. python3元组,列表的几个属性

    list1 = ['a', 'b', 'c', 'a'] tuple1 = ('a', 'b', 'c', 'a') 计算list1或者tuple1中元素的个数:  count_a = list1.c ...

  8. 转:深入理解css中position属性及z-index属性

    原文链接:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种 ...

  9. ORACLE network environment

    监听程序 建立网络连接 要建立客户机或中间层连接,Oracle Net要求客户机 下列事项: 运行监听程序的主机 监听程序监视的端口 监听程序使用的协议 监听程序处理的服务名 Hostname/ip ...

  10. java 字符转换流

    package cn.sasa.demo4; import java.io.FileInputStream; import java.io.FileOutputStream; import java. ...