vue常用技巧-动态btn的封装

　　@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
    },
  },