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 ...
随机推荐
- RabbitMQ in Depth札记——AMQ协议
RPC传输 作为AMQP的实现,RabbitMQ使用RPC(remote procedure call)模式进行远程会话.而不同于一般的RPC会话--客户端发出指令,服务端响应,但服务端不会向客户端发 ...
- {Django基础十之Form和ModelForm组件}一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 ModelForm
Django基础十之Form和ModelForm组件 本节目录 一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 Model ...
- HDU 4347 - The Closest M Points - [KDTree模板题]
本文参考: https://www.cnblogs.com/GerynOhenz/p/8727415.html kuangbin的ACM模板(新) 题目链接:http://acm.hdu.edu.cn ...
- 编译安装spark 1.5.x(Building Spark)
原文连接:http://spark.apache.org/docs/1.5.0/building-spark.html · Building with build/mvn · Building a R ...
- HBase实战 | 知乎实时数仓架构演进
https://mp.weixin.qq.com/s/hx-q13QteNvtXRpNsE5Y0A 作者 | 知乎数据工程团队编辑 | VincentAI 前线导读:“数据智能” (Data Inte ...
- Flink – JobManager.submitJob
JobManager作为actor, case SubmitJob(jobGraph, listeningBehaviour) => val client = sender() val jobI ...
- UTF8 、unicode 和 Ascii2
1.http://blog.renren.com/share/68464/3096404244
- Hash算法解决冲突的方法
https://blog.csdn.net/feinik/article/details/54974293 Hash算法解决冲突的方法一般有以下几种常用的解决方法1, 开放定址法:所谓的开放定址法就是 ...
- Js_protoType_原型
1.什么是原型? 之前在网上看了好多,各种说法的都有,说的很晦涩,很难理解,我觉得用的多了就会慢慢理解它的意思,总之来说,每个对象都有一个指向它原型,也就是每个对象都有原型. 2.原型有什么用? 原型 ...
- notify,wait,synchronized实现线程间通知
wait阻塞线程释放锁:notify使wait所在的线程被唤醒在次获得锁,并执行,但要等到notify所在的线程代码全部执行后! 示例代码如下: package com.vhbi.service.im ...