vue 點擊按鈕，邊框變色

要求：第一個按鈕是選中的狀態，點擊按鈕變背景色

效果圖：

點擊前：

 

 點擊后：

 

 

先寫一個簡單的按鈕樣式

<template>
  <div>
    <button class="btn1">按鈕1</button>
    <button class="btn2">按鈕2</button>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>
<style scoped>
.btn1 {
  width: 72px;
  height: 20px;
  border: 1px solid #d9d9d9;
  border: 0;
  outline: none;
}
.btn2 {
  width: 72px;
  height: 20px;
  border: 1px solid #d9d9d9;
  border: 0;
  outline: none;
}
</style>

然后在需要寫點擊之后的樣式和邏輯代碼：

加一個三元表達式和樣式，以及點擊事件

<button
      class="btn1"
      @click="btn1data()"
      :class="showmode ? 'active' : 'btn1'"
    >
      按鈕1
    </button>
    <button
      class="btn2"
      @click="btn2data()"
      :class="!showmode ? 'active' : 'btn1'"
    >
      按鈕2
    </button>



 return {
      showmode: true
    };


 methods: {
    btn1data() {
      this.showmode = true;
    },
    btn2data() {
      this.showmode = false;
    }



.btn2.active {
  background: red;
}
  }

完整代碼：

html：

<template>
  <div>
    <button
      class="btn1"
      @click="btn1data()"
      :class="showmode ? 'active' : 'btn1'"
    >
      按鈕1
    </button>
    <button
      class="btn2"
      @click="btn2data()"
      :class="!showmode ? 'active' : 'btn1'"
    >
      按鈕2
    </button>
  </div>
</template>

css：

.btn1.active,
.btn2.active {
  background: red;
}

js：

<script>
export default {
  data() {
    return {
      showmode: true
    };
  },
  methods: {
    btn1data() {
      this.showmode = true;
    },
    btn2data() {
      this.showmode = false;
    }
  }
};
</script>

 

然后就大功告成啦！