在VueJS 2中将类添加到未选择的项目

Question

每当我选择一个项目并向其添加active类时，我都尝试设置一个活动状态。现在，我想知道如何获取未选择的项目并添加一个特定的类，如not-active。

样品：

<img src="/images/icons/thumbup.png"
     @click="setActive('thumbUp')"
     class="thumb-active"
     :class="{ active: isActive('thumbUp') }">

<img src="/images/icons/thumbdown.png" 
     @click="setActive('thumbDown')"
     class="thumb-active"
     :class="{ active: isActive('thumbDown') }">

Vue脚本：

export default {
        data() {
            return {
                activeItem: '',
            }
        },
        methods: {
            isActive: function (button) {
                return this.activeItem === button
            },
            setActive: function (button) {
                this.activeItem = button
            }
        },
    }

Answer 1

非常，非常只是

:class="{ active: isActive('state A'), 'not-active': isActive('state B') }"

这是一个演示......

var app = new Vue({
  el: '#app',
  data: {
    activeItem: null
  },
  methods: {
    isActive: function (button) {
        return this.activeItem === button
    },
    setActive: function (button) {
        this.activeItem = button
    }
  }
})

.active {
  background-color: green;
  color: white;
  font-weight: bold;
}

.not-active {
  background-color: red;
  color: white;
}

button {
  font-size: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<div id="app">
<button src="/images/icons/thumbup.png"
     @click="setActive('thumbUp')"
     class="thumb-active"
     :class="{ active: isActive('thumbUp'), 'not-active': isActive('thumbDown') }">
     Thumbs Up!
</button>

<button src="/images/icons/thumbdown.png" 
     @click="setActive('thumbDown')"
     class="thumb-active"
     :class="{ active: isActive('thumbDown'), 'not-active': isActive('thumbUp') }">
     Thumbs Down¡
</button>
</div>