我用的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. cmd打开E盘文件

    在命令行中输入你想要打开文件所在的磁盘,这里我以打开E:\homework\1.jpg来给大家做示范.在命令行中输入  E:   输入后按下enter键.就进入E盘中,效果如图所示!   如果你想要查 ...

  2. 静态方法中只允许访问静态数据,那么,如何在静态方法中访问类的实例成员(即没有附加static关键字的字段或方法)?

    package test.two; public class jingtaihanshu { int x = 3; static int  y = 4; public static void Meth ...

  3. 用mysql-connector操作MySQL数据库

    首先是工具库的安装 pip install mysql-connector 连接数据库 #连接数据库 #常规连接方式 conn = mysql.connector.connect(user=', da ...

  4. C语言保证,0永远不是有效的数据地址,因此,返回址0可用来表示发生的异常事件

    C语言保证,0永远不是有效的数据地址,因此,返回址0可用来表示发生的异常事件

  5. 查找->静态查找表->次优查找(静态树表)

    文字描算 之前分析顺序查找和折半查找的算法性能都是在“等概率”的前提下进行的,但是如果有序表中各记录的查找概率不等呢?换句话说,概率不等的情况下,描述查找过程的判定树为何类二叉树,其查找性能最佳? 如 ...

  6. 《Mysql 日志结构》

    推荐一首歌 - <往后余生>王贰浪 发现自己每天就听这么几首歌 一:慢查询日志 - SQL 完成查询并完成对于锁资源的释放之后,msqld 会将符合条件的SQL写入慢日志.因此慢日志可能和 ...

  7. java ftp上传文件

    /** * 上传文件到ftp * @param server * @param user * @param pwd * @param filenames */ public static void u ...

  8. 集齐所有机制的按键控制LED驱动

    内核版本:linux2.6.22.6 硬件平台:JZ2440 驱动源码 final_key.c : #include <linux/module.h> #include <linux ...

  9. PHP三种运行方式(转载)

    三种运行方式:mod_php5.cgi.fast-cgi 1. 通过HTTPServer内置的模块来实现, 例如Apache的mod_php5,类似的Apache内置的mod_perl可以对perl支 ...

  10. 重新安装phpstudy之后出现了403的错误

    1. httpd.conf 文件,找到如下代码: DocumentRoot "D:\WWW" <Directory /> Options +Indexes +Follo ...