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 ...
随机推荐
- linux下升级gcc版本(gcc-7)
ubuntu16.04的自带gcc版本为gcc-5,因为安装pl-slam的需要升级到gcc-7,可以通过以下命令查看你的gcc版本 gcc --version 通过apt工具对gcc进行升级 sud ...
- POJ 1488 - TEX Quotes
Description TEX is a typesetting language developed by Donald Knuth. It takes source text together w ...
- CSS:盒模型和position定位
盒模型 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model ).请看Chrome DevTools 里的截图: 可以显而易见的看出盒模型由 4 部分组成.从内到外分 ...
- day4:数据结构list
1,一直输入用户名,输入Q退出,注意用户的输入别忘了加strip,和upper不区分大小写,list最后一位添加append li = [] while 1: name = input("& ...
- 【编译原理】c++实现自下而上语法分析器
写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...
- WordCount 的实现与测试
一.开头 (1)合作者:201631062627,201631062427 (2)代码地址:https://gitee.com/catchcatcat/WordCount.git 二.正文 (1)基本 ...
- 【Python爬虫】BeautifulSoup网页解析库
BeautifulSoup 网页解析库 阅读目录 初识Beautiful Soup Beautiful Soup库的4种解析器 Beautiful Soup类的基本元素 基本使用 标签选择器 节点操作 ...
- IIS进程回收导致定时器失效的一种解决办法
公司开发的网站使用的.net,网站中用到了定时器,放在Global.asax.cs文件中,但由于IIS设置了网站进程定期回收,回收后定时器也就没了.如果不让进程回收,又担心程序中有内存泄露.有人说可以 ...
- tomcat停止和启动脚本
日常重启tomcat比较麻烦,所以写了2个脚本,在脚本后输入tomcat名称即可 启动或重启tomcat #!/bin/sh TOMCAT_HOME=/usr/java/$1 if [ ! -n &q ...
- Activiti(生成25张表)
有两种方式,第一种是使用默认的配置文件,第二种是指定配置文件: package com.ouyan.activiti.table; import org.activiti.engine.Process ...