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 ...
随机推荐
- easyui tree 更改图标
easyui tree 更改图标 ,onLoadSuccess: function (node, data) { $('#tt .tree-icon').css("background&qu ...
- 洛谷P1219 八皇后【dfs】
题目描述 检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对角线(包括两条主对角线的所有平行线)上至多有一个棋子. 上面的布局可以用序列2 4 6 1 3 ...
- 基于ASP.NET Core Data Protection生成验证token
ASP.NET Core Data Protection 不仅提供了非对称加密能力,而且提供了灵活的秘钥存储方式以及一致的加解密接口(Protect与Unprotect).Session中用到了它,C ...
- toggle显示与隐藏切换
jQuery中显示与隐藏切换toggle方法 show与hide是一对互斥的方法.需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法.比如显示的元 ...
- nginx rate limit
nginx rate limithttps://www.topjishu.com/12139.htmlhttps://blog.csdn.net/hellow__world/article/detai ...
- XML文件处理
XML XML简介 XML被设计用来传输和存储数据. XML是可扩展标记语言. 解析XML的几种方式 DOM,DOM4j------先把XML文件读取到内存中,然后再解析 SAX----------边 ...
- Flink – JobManager.submitJob
JobManager作为actor, case SubmitJob(jobGraph, listeningBehaviour) => val client = sender() val jobI ...
- jquery基础学习之DOM篇(二)
在此之前请牢记,jquery 是一个合集对象!!!! 1.节点创建 js创建方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHT ...
- Celery 出现Process 'Worker-5' pid:5608 exited with 'exitcode 1' 问题
起初我以为是进程PID文件问题,从新删除问题并未解决. 现已解决办法公布如下: pip install --upgrade billiard 原因:依赖的billiard库版本有点低,更新即可
- qtcreator添加绿色版VC编译器
在不装VS的情况下为qtcreator添加VC编译器和调试器 首先假设在D盘有VC6,VC2002,VC2003,VC2005,VC2008,VC2010,VC2013等绿色版的VC编译器,编译器的的 ...