template:

1 <view class="wrap">
2 <view class="total" :class="{ select: true, active: item.id === sel }" v-for="(item,index) in tabs" :key="index"
3 @click="select(item)">
4 {{ item.label }}
5 </view>
6 </view>

script:

 1 data() {
2 return {
3 sel: 1,
4 tabs: [
5 {label: '全部(32)', id: 1},
6 {label: '非常满意(12)', id: 2},
7 {label: '满意(21)', id: 3},
8 {label: '一般满意(12)', id: 4},
9 {label: '不满意(0)', id: 5},
10 ],
11 type: 'default',
12 inverted: false
13 };
14 }
methods:{
select(item) {
this.sel = item.id;
},

css:

 1 .wrap{
2 margin: 30upx 0 30upx 30upx;
3 }
4 .total{
5 height: 56upx;
6 border-radius:100px;
7 background:#F4FAFF;
8 border:1px solid rgba(76,143,255,1);
9 color:#4c8fff;
10 text-align:center;
11 padding:8upx 30upx;
12 margin:0 30upx 20upx 0;
13 float:left
14 }
15 .select.active {
16 background: #4c8fff;
17 color: #FFFFFF;
18 }

最终实现,如下图:点击哪个哪个变化,其他的恢复默认样式

希望可以对小伙伴有所帮助哦!

在vue中实现点击哪个哪个区域变化背景色和字体颜色,其他默认(uni-app框架中也可以使用)的更多相关文章

  1. C#中怎样获取默认配置文件App.config中配置的键值对内容

    场景 在新建一个程序后,项目中会有一个默认配置文件App.config 一般会将一些配置文件信息,比如连接数据库的字符串等信息存在此配置文件中. 怎样在代码中获取自己配置的键值对信息. 注: 博客主页 ...

  2. echarts-环形图处理图列中的点击,使百分比的数据列不发生变化,默认追加其他选项

    将下列代码copy的echarts编辑器中 app.title = '环形图'; var $legendData = ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']; var ...

  3. 【Java】点击 JButton 修改 Jlabel 的文字和字体颜色

    要求: 点击 JButton 后执行一个方法 m(比较耗时),点击时改变 JLabel 的字体和颜色,方法 m 运行结束后再次修改 JLabel 的字体和颜色. 刚开始点击,都是方法 m 运行结束后, ...

  4. VC、MFC中设置控件的背景色、标题、字体颜色、字体要注意的地方[转]

    在MFC中设置控件的背景色.字体.字体颜色.标题等属性主要是利用OnCtlColor函数来实现. 如: HBRUSH CAlarm::OnCtlColor(CDC* pDC, CWnd* pWnd, ...

  5. Yii框架中集成phprpc、hprose

    在项目开发的过程中有时候会涉及到对外提供接口供第三方程序调用或者是不同程序间需要相互通信,那么最通用的做法是用传统的SOAP方式来实现,用XML的文档格式来作为传输载体.但是这种方式不灵活,支持的数据 ...

  6. layUI框架中文件上传前后端交互及遇到的相关问题

    下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...

  7. getLocation 需要在 app.json 中声明 Permission 字段

    小程序开发中,清除授权状态后,重新编译,提示:getLocation 需要在 app.json 中声明 Permission 字段 需要在 app.json 里面增加 permission 属性配置( ...

  8. Spring Security框架中踢人下线技术探索

    1.背景 在某次项目的开发中,使用到了Spring Security权限框架进行后端权限开发的权限校验,底层集成Spring Session组件,非常方便的集成Redis进行分布式Session的会话 ...

  9. ABP VNext框架中Winform终端的开发和客户端授权信息的处理

    在ABP VNext框架中,即使在它提供的所有案例中,都没有涉及到Winform程序的案例介绍,不过微服务解决方案中提供了一个控制台的程序供了解其IDS4的调用和处理,由于我开发过很多Winform项 ...

随机推荐

  1. 微信小程序发布列表页面处理

    wxml: <!--pages/good_index/good_index.wxml--> <view class='list'> <block wx:for='{{in ...

  2. jq全选、全不选、反选、单删、批量删除

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  3. think php 登录日记

    */ public function save(Request $request) { // $params = $request->param(); $file = $request-> ...

  4. thinkphp 框架自带搜索+分页+搜索标红

    ..........控制器方法 public function index() { //接受搜索关键字 $word=input('word'); $where=[]; if (!empty($word ...

  5. PhpStrom 好用的翻译插件

    最近php使用laravel框架的比较多,里面的注释都是英文的,有些同学的英语不是很好,不过不用但是侯蜀黍带你一个好用的翻译插件,告别烦恼一了百了 Translation 翻译插件 安装: 打开Fil ...

  6. tensorflow core 核心目标依赖图

    Tensorflow的核心代码在core模块中,56w行的代码量让人望而生畏,熟悉了bazel工具之后,发现BUILD文件是理清代码结构的很好的资源,但使用bazel query语法提取出来//ten ...

  7. Python文件读写--错误一

    在学习python的文件读写操作的时候,我遇到了一点麻烦事,觉得可以记录下来,先上代码吧. with open('test.txt') as file: file.write('test') prin ...

  8. 打靶笔记-04-vulnhub-Jangow

    打靶笔记-04-vulnhub-Jangow 前面两篇名称写成了vulhub,已经更改为vulnhub;vulhub的之后再找个时间集中打一遍. 一.靶机信息 Name: Jangow: 1.0.1 ...

  9. 安装ncclient出现rust版本不对问题解决

    在windows上安装ncclient的时候,出现了提示说rust版本需要至少1.14.0以上版本 解决办法: 在https://www.rust-lang.org/tools/install下载新版 ...

  10. 手把手建立Roofline模型(CPU)

    Roofline模型原理 Roofline模型是由加州理工大学伯利克提出的用来建立当前计算平台在不同的计算强度(Operational Intensity)下能够达到的理论计算上限 .论文和基础理论和 ...