vue点击排序按钮之后按钮变色

news/2024/7/4 0:48:41 标签: vue.js, javascript, class
class="baidu_pl">
class="article_content clearfix">
class="markdown_views prism-atom-one-dark">

举例：排序，点击按钮，按钮变为蓝色
在这里插入图片描述 在这里插入图片描述
使用判定表达式true或false定义样式是否显示
:class="{'自定义样式类名'：true或false表达式}"
上代码：

class="prism language-class="tags" href="/tags/JAVASCRIPT.html" title=javascript>javascript">class="token operator"><i class="token keyword">classclass="token operator">=class="token string">"el-icon-caret-top" 
class="token operator">:class="token keyword">classclass="token operator">=class="token string">"{'active': activeSort.dataType=='MODIFY_TIME'&&activeSort.sortType=='asc'}"
 @clickclass="token operator">=class="token string">"sort('MODIFY_TIME','asc')"class="token operator">>
class="token operator"><class="token operator">/iclass="token operator">>


class="token operator"><style langclass="token operator">=class="token string">'less' scopedclass="token operator">>
class="token punctuation">.activeclass="token punctuation">{
  colorclass="token operator">: #class="token number">1890ffclass="token punctuation">;
class="token punctuation">}
class="token operator"><class="token operator">/styleclass="token operator">>

http://www.niftyadmin.cn/n/1728542.html

相关文章

echarts绘制折线图__纵坐标为虚线__折线下方区域有阴影__折线下方渐变色__调整折线颜色__提示框内容自定义设置__提示框文字前显示小圆点

echarts绘制折线图__纵坐标为虚线__折线下方区域有阴影__折线下方渐变色__调整折线颜色__提示框内容自定义设置__提示框文字前显示小圆点

效果图&#xff1a; 下面直接上代码&#xff1a; <template><el-container><el-main><div id"lineChart" :style"{width:400px,height:260px}"></div></el-main></el-container> </template><scri…
阅读更多...
python飞机大战简书_Python飞机大战

python飞机大战简书_Python飞机大战

代码&#xff1a;# 飞机大战项目(初始版)# 控制飞机import randomfrom os import pathimport pygameimg_dir path.join(path.dirname(__file__), img)snd_dir path.join(path.dirname(__file__), snd)WIDTH 480HEIGHT 600FPS 60POWERUP_TIME 5000WHITE (255, 255, 255)B…
阅读更多...
echarts柱状图渐变颜色，new echarts报错__this.$echarts会出现覆盖_（解决办法，有用）

echarts柱状图渐变颜色，new echarts报错__this.$echarts会出现覆盖_（解决办法，有用）

效果图&#xff1a; 事前配置 我只在main.js中引入了echarts 上面两个问题解决办法: 可直接使用new this.$echarts 写渐变柱状图解决方案1.直接使用new echarts报错,2.使用this.$ echarts出现效果覆盖1.直接使用new echarts报错, 原因: 我只在main.js中引入了echarts,在该页…
阅读更多...
echarts写渐变柱状图完整代码

echarts写渐变柱状图完整代码

效果图&#xff1a; 下面直接上代码&#xff1a; <template><el-container><div id"barChart" style"width:400px;height:200px"></div></el-container> </template> <script> export default {mounted(){th…
阅读更多...
echarts设置圆环饼状图中字体的样式__formatter无法设置圆环中文字样式（有用）

echarts设置圆环饼状图中字体的样式__formatter无法设置圆环中文字样式（有用）

设置圆环饼状图中字体的样式 1.使用series/label/formatter中使用html进行样式设置&#xff0c;无效解决办法&#xff1a;使用富文本格式rich1.使用series/label/formatter中使用html进行样式设置&#xff0c;无效 百度到的原因是因为该位置的formatter不支持html格式 效果图…
阅读更多...
python周志_Python实现获取某天是某个月中的第几周

python周志_Python实现获取某天是某个月中的第几周

找了半天竟然没找到&#xff0c;如何在Python的datetime处理上&#xff0c;获取某年某月某日&#xff0c;是属于这个月的第几周。无奈之下求助同学&#xff0c;同学给写了一个模块。【如果你知道Python有这个原生的库&#xff0c;请不吝赐教】我稍作整理记录在下。#!/usr/bin/e…
阅读更多...
解决vue项目安装node-sass出现的各种报错问题（解决办法，有用）

解决vue项目安装node-sass出现的各种报错问题（解决办法，有用）

安装node-sass出现各种报错 原因&#xff1a;node-sass,node,sass-loader版本不匹配 解决办法&#xff1a;在终端执行下面命令 npm install node14.3.0 npm install node-sass4.14.1 npm install sass-loader7.3.1 npm run dev
阅读更多...
python类call方法_Python类__call__()方法

python类call方法_Python类__call__()方法

__call__()&#xff1a;Python中&#xff0c;只要在创建类型的时候定义了__call__()方法&#xff0c;这个类型就是可调用的。Python中的所有东西都是对象&#xff0c;其中包括Int/str/func/class这四类&#xff0c;它们都是对象&#xff0c;都是从一个类创建而来的。元类就是创…
阅读更多...
最新文章

Copyright @ 2022~2023