vue框架设置多个按钮点击切换效果

 

效果如下：

1.多个按钮可使用动态渲染：

定义一个数组变量，里边存放按钮名字，class使用一个静态class存变化前的统一类名,和一个动态类：class放点击时切换样式的类名，动态的类名要设置范围，变量color等于标签的索引i,即：color==i;

注意：动态的:tabindex属性，专门用于标记获得焦点后的标签，该属性配合伪元素:focus使用，但是该方式，当点击完之后在点击其他地方，其他地方会获得交掉，按钮将失去焦点变为焦点前的样式，所以为了实现点击其他地方按钮不会变为点击前的样式，我们使用该片所讲的方式，去掉:tabindex="i"。

<template v-for="(item, i) in buttonList" :key="i">
   <span
              :tabindex="i"
              class="right"
              :class="{ blue: color == i }"
              @click="onClick(item, i)"
              >{{ item }}</span>
  </template>

 2.给按钮加了点击事件并传参数索引给该事件，同时定义一个变量，在点击事件发生时，将所点击的按钮的索引，即所传的参数i赋值给该变量。

const onClick = (val, i) => {
      state.color = i;
}