我用的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. linux下升级gcc版本(gcc-7)

    ubuntu16.04的自带gcc版本为gcc-5,因为安装pl-slam的需要升级到gcc-7,可以通过以下命令查看你的gcc版本 gcc --version 通过apt工具对gcc进行升级 sud ...

  2. POJ 1488 - TEX Quotes

    Description TEX is a typesetting language developed by Donald Knuth. It takes source text together w ...

  3. CSS:盒模型和position定位

    盒模型 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model ).请看Chrome DevTools 里的截图: 可以显而易见的看出盒模型由 4 部分组成.从内到外分 ...

  4. day4:数据结构list

    1,一直输入用户名,输入Q退出,注意用户的输入别忘了加strip,和upper不区分大小写,list最后一位添加append li = [] while 1: name = input("& ...

  5. 【编译原理】c++实现自下而上语法分析器

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...

  6. WordCount 的实现与测试

    一.开头 (1)合作者:201631062627,201631062427 (2)代码地址:https://gitee.com/catchcatcat/WordCount.git 二.正文 (1)基本 ...

  7. 【Python爬虫】BeautifulSoup网页解析库

    BeautifulSoup 网页解析库 阅读目录 初识Beautiful Soup Beautiful Soup库的4种解析器 Beautiful Soup类的基本元素 基本使用 标签选择器 节点操作 ...

  8. IIS进程回收导致定时器失效的一种解决办法

    公司开发的网站使用的.net,网站中用到了定时器,放在Global.asax.cs文件中,但由于IIS设置了网站进程定期回收,回收后定时器也就没了.如果不让进程回收,又担心程序中有内存泄露.有人说可以 ...

  9. tomcat停止和启动脚本

    日常重启tomcat比较麻烦,所以写了2个脚本,在脚本后输入tomcat名称即可 启动或重启tomcat #!/bin/sh TOMCAT_HOME=/usr/java/$1 if [ ! -n &q ...

  10. Activiti(生成25张表)

    有两种方式,第一种是使用默认的配置文件,第二种是指定配置文件: package com.ouyan.activiti.table; import org.activiti.engine.Process ...