@1.要求:

  1.点击某个按钮后激活active样式,其余按钮则为normal样式

  2.要满足任意个数btn(btn个数不确定)

  

  @2.思路:

  1.首先,btn个数不确定则意味着必须使用v-for循环复用btn

  2.btn需要有两个对应样式,一个是普通未激活btn,一个是active(btn active)

  3.需要注意的是如果把active等激活状态样式写到最外层(scss),可能权重和btn一样而无法层叠样式,需要加上!important 给active加权// 当然如果写到里面就无需这样处理,只是之后维护可能会繁琐一点,根据实际情况处理

  4.因为涉及状态的改变,所以必须有一个状态两标志用户选择了btn,而且btn必须有标识用来区分到底选中的是那个btn

   btn的排序一般交给v-for循环出来的index

     <view
class="btn"
v-for="(item, index) in list"
:key="index"
@click="toggle(index)"
:class="[isActive == index ? 'active' : '']"
>
    // 注意在循环中可以直接将index当成参数传递给事件方法

  5.隐藏可选的btn是一组index值,例如[0,1,2,3],当我们选中某个按钮时,就选中了某个对应值,我们把对应值用状态变量isActive

存储起来,就知道选中了哪个btn

  6.那么只要@click 某个btn,就把当前btn的index赋给isActive,之后和各个btn的index值进行比较,和isActive相等的那个就是激活的btn

  data() {
return {
isActive: 0,
list: [
{
name: '同比分析',
},
{
name: '同比分析',
},
{
name: '分类型对比',
},
{
name: '分类型',
},
],
}
},
methods: {
toggle(index) {
this.isActive = index
},
},

vue常用技巧-动态btn的封装的更多相关文章

  1. Vue常用经典开源项目汇总参考-海量

    Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

  2. vue的技巧代码

    转载:https://segmentfault.com/a/1190000014085613 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList ...

  3. Android ListView 常用技巧总结

    本文对 ListView 中的一些常用技巧做一个总结.附:虽然现在 RecyclerView 已逐渐取代 ListView,但实际情况是大部分项目中还在使用 ListView.当然,后续我会在我的博客 ...

  4. Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件

    一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列.双列.多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创 ...

  5. oracle存储过程常用技巧

    我们在进行pl/sql编程时打交道最多的就是存储过程了.存储过程的结构是非常的简单的,我们在这里除了学习存储过程的基本结构外,还会学习编写存储过程时相关的一些实用的知识.如:游标的处理,异常的处理,集 ...

  6. Android ListView 常用技巧

    Android ListView 常用技巧 Android TextView 常用技巧 1.使用ViewHolder提高效率 ViewHolder模式充分利用了ListView的视图缓存机制,避免了每 ...

  7. JavaScript常用技巧总结(持续添加中...)

    在我学习过程中收集的一些常用技巧: typeof x !== undifined 判断x是否已定义: x === Object(x)  判断x是否为对象: Object.keys(x).length ...

  8. Android之ListView常用技巧

    ListView是一个非常常用的列表控件,虽然在5.x时代ListView的风头正在逐渐的被RecyclerView抢去,但是ListView的使用范围依然十分广泛. 接下来的ListView的常用技 ...

  9. 教你一个vue小技巧,一般人我不说的

    本文由云+社区发表 1. 需求 最近的项目中,需要实现在vue框架中动态渲染带提示框的单选/多选文本框,具体的效果如下图所示,在输入框聚焦时,前端组件通过接收的kv参数渲染出选项,用户点击选项,可以将 ...

随机推荐

  1. Redis高并发处理常见问题及解决方案

    1. 大型电商系统高流量系统设计 场景: 大量电商系统每天要处理上亿请求,其中大量请求来自商品访问.下单.商品的详情是时刻变化,由于请求量过大,不会频繁去服务端获取商品信息,导致服务器压力极大.需要用 ...

  2. 设置administrator账号密码

    设置administrator账号密码: 打开:附件->运行 输入:lusrmgr.msc 在里面的用户里修改administrator密码

  3. Demo03找素数

    package Deom1;import java.awt.*;import java.util.Scanner;public class lx {//输入任意两个正整数,求出这两个正整数之间素数的个 ...

  4. linux系统中安装JDK

    安装之前的准备工作 查看系统中之前安装好的JDK java –version rpm -qa | grep java 卸载JDK (以java-1.7.0-openjdk-1.7.0.45-2.4.3 ...

  5. day14 linux三剑客之sed命令

    day14 linux三剑客之sed命令 sed命令 Sed 主要用来自动编辑一个或多个文件.简化对文件的反复操作.编写转换程序等. sed(流式编辑器) : sed主要用来修改文件. 1.sed命令 ...

  6. flink---实时项目----day03---1.练习讲解(全局参数,数据以parquet格式写入hdfs中) 2 异步查询 3 BroadcastState

    1 练习讲解(此处自己没跑通,以后debug) 题目见flink---实时项目---day02 kafka中的数据,见day02的文档 GeoUtils package cn._51doit.flin ...

  7. Hive(十)【窗口函数】

    目录 一.定义 窗口函数: 标准聚合函数 分析排名函数 二.语法 (1)窗口函数 over([partition by 字段] [order by 字段] [ 窗口语句]) (2)窗口语句 三.需求练 ...

  8. 商业爬虫学习笔记day2

    1. get传参 (1)url中包含中文报错解决方法 urllib.request.quote("包含中文的url", safe = "string.printtable ...

  9. An internal error occurred during: “Updating Maven Project”. Unsupported IClasspathEntry kind=4解决办法

    An internal error occurred during: "Updating Maven Project". Unsupported IClasspathEntry k ...

  10. easyhadoop 安装

    ldconfig deferred processing now taking place正在处理用于 libapache2-mod-php5 的触发器... * Reloading web serv ...