Vuejs2 将类添加到VueJS 2中未选中的项

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

样本：

<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') }">

非常非常简单

这是一个演示

var app=新的Vue{ el:“应用程序”， 数据：{ activeItem:空 }, 方法：{ isActive：功能按钮{ 返回此按钮。activeItem===按钮 }, 设置激活：功能按钮{ this.activeItem=按钮 } } } .主动{ 背景颜色：绿色； 颜色：白色； 字体大小：粗体； } .不活跃{ 背景色：红色； 颜色：白色； } 钮扣{ 字号：2em； } 竖起大拇指！ 大拇指朝下-

---

谢谢，试过了，但不活跃的课程总是存在。我希望它只是添加到未选中的项目。它只会在一段时间后触发click@claudios你不是真的在用你是什么？是什么将项目定义为未选中？我使用thumbUp和thumbDown作为参数。当页面加载时，非活动类始终存在，这与我想要的相反achieve@claudios我不知道你说的是什么意思。您正在初始化组件，使其activeItem的值为空，因此，首先当然存在非活动类是的，初始化时存在非活动类，因为没有返回所选项目。现在，我们如何在选择后添加类？

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

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