点击button的样式改变

今天学习的是一个简单的逻辑事件,点击按钮样式发生改变

想想一下,当我们有一排点击按钮的时候,我们想要当我们点击某一个的时候相应的按钮会作出样式的改变,是不是很酷,很简单的,接下来就带着大伙展示一下

1. 首先肯定要有我们的button按钮对吧如有不懂的稍后会加以解释

<button
      v-for="index in 3"
      :key="index"
      @click="select(index)"
      :class="[activeIndex === index ? 'active' : '']"
    >
      {{ index }}
    </button>

2. 自定义一个方法,并传入一个值,这个值就是我们对应点击的时候对应的按钮index值,这不难懂把,点击按钮1就按钮1变化,点击按钮2就按钮2变化,所以我们就是要传入对应按钮的index值

  methods: {
    select(index) { // 介绍一个参数,这个参数就是对应按钮的index值
      this.activeIndex = index;
    },
  },

3. 接下来就是样式的改变了css代码

<style>
.active{
  padding: 10px;
  background: yellow;
}
</style>

疑惑解答

1. 首先就是我们如果判断按钮样式的改变, 没错就是index
2. :class="[activeIndex === index ? 'active' : '']",有的同学看不懂这一段,这里就是动态绑定一个class,如果activeIndex===index为true的话就是active,如果为false的话就为空,一定一定记得要在data里先定义activeIndex!!

完整代码

<template>
  <!-- <div class="static" :class="{ active: isActive, disactive: not }">hizz</div> -->
  <div class="classObject">
    <button
      v-for="index in 3"
      :key="index"
      @click="select(index)"
      :class="[activeIndex === index ? 'active' : '']"
    >
      {{ index }}
    </button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: null,
    };
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActive && !this.error,
        "text-danger": this.error,
      };
    },
  },
  methods: {
    select(index) {
      this.activeIndex = index;
    },
  },
};
</script>
<style>
.active{
  padding: 10px;
  background: yellow;
}
</style>