Vue实现多个按钮切换样式Vue实现多个按钮切换样式

Vue实现多个按钮切换样式

1.思路

使用vue的动态绑定class样式。

设置一个参数opt，然后每个按钮设置点击事件该变该参数。

每个class用三元表达式判断opt是否满足情况。

2.代码

<p id="btn_box">
        <button
          @click="durationData('CPU', '1')"
          :class="[CPUopts.on == '1' ? 'activeClass' : '']"
        >
          1小时
        </button>
        <button
          @click="durationData('CPU', '2')"
          :class="[CPUopts.on == '2' ? 'activeClass' : '']"
        >
          1天
        </button>
        <button
          @click="durationData('CPU', '3')"
          :class="[CPUopts.on == '3' ? 'activeClass' : '']"
        >
          1周
        </button>
        <button
          @click="durationData('CPU', '4')"
          :class="[CPUopts.on == '4' ? 'activeClass' : '']"
        >
          1月
        </button>
      </p>

js部分

let CPUopts = reactive({ on: "1" });  
function durationData(type, opts) {
      if (type == "CPU") {
        CPUopts.on = opts;
      } 
  };

3.结果

最后

以上就是秀丽服饰为你收集整理的Vue实现多个按钮切换样式Vue实现多个按钮切换样式的全部内容，希望文章能够帮你解决Vue实现多个按钮切换样式Vue实现多个按钮切换样式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。