Vue.Js v-bind:class 在点击时不添加类

Question

我对 Vue.js 还是很陌生，过去几周一直在工作中使用它。我被要求对现有代码进行小幅更新，但无法使 v-bind:class 正常工作。 在我的简化示例中，如果单击按钮，其他类应该变得不那么突出，即

• 如果单击“颜色”，则任何具有“声音”或“形状”类的内容都会降低不透明度
• 如果单击“形状”，则任何具有“颜色”或“声音”类的内容都会降低不透明度
• 如果单击“声音”，则任何具有“颜色”或“形状降低不透明度”类的内容

当然，不应像我的示例中那样同时选择两个按钮，例如在之前选择“颜色”后选择“形状”应该撤消“形状”类的不透明度并添加到必要的课程。

发生的事情是只有“声音”按钮功能正常......“颜色”没有任何作用，“形状”只有一半工作！

我知道我可以使用 JavaScript 编写一个方法来通过获取 elementByClassName 来更改 DOM，但我想坚持正确使用 Vue（如果可能的话）

var app = new Vue({
  el: '#app',
  data: {
    colourAddClass: false,
    shapeAddClass: false,
    soundAddClass: false,
  }
})

.opacity {
  opacity: 0.3;
}

.colour {
  color: blue;
}

.shape {
  color: red;
}

.sound {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <button @click="colourAddClass = !colourAddClass"> Colours </button>
    <button @click="shapeAddClass = !shapeAddClass"> Shapes </button>
    <button @click="soundAddClass = !soundAddClass"> Sounds </button>
    <br/><br/>
    <span class="colour" v-bind:class="{'opacity': shapeAddClass, 'opacity': soundAddClass}">Yellow</span>
    <span class="shape" v-bind:class="{'opacity': colourAddClass, 'opacity': soundAddClass}">Triangle</span>
    <span class="sound" v-bind:class="{'opacity': colourAddClass, 'opacity': shapeAddClass}">Woof</span>
    <span class="shape" v-bind:class="{'opacity': colourAddClass, 'opacity': soundAddClass}">Circle</span>
    <br/>
    <span class="sound" v-bind:class="{'opacity': colourAddClass, 'opacity': shapeAddClass}">Meow</span>
    <span class="colour" v-bind:class="{'opacity': shapeAddClass, 'opacity': soundAddClass}">Purple</span>
    <span class="shape" v-bind:class="{'opacity': colourAddClass, 'opacity': soundAddClass}">Circle</span>
    <span class="colour" v-bind:class="{'opacity': shapeAddClass, 'opacity': soundAddClass}">Orange</span>
</div>

Answer 1

有很多方法可以使用 VueJS 完成这些类型的任务。下面是一种方法。我相信其他人有更短的方法。为了解释我的方法，我使用单个变量来跟踪当前活动按钮。我使用一种方法来设置该变量，因为我们想要打开和关闭。然后我将类属性绑定到一些逻辑。

var app = new Vue({
  el: '#app',
  data: {
    active: null
  },
  methods: {
    toggleActive( type ) {
        //if active is already of this type, set to null
        this.active = ( this.active == type ) ? null : type;
    }
  }
})

.opacity {
  opacity: 0.3;
}

.colour {
  color: blue;
}

.shape {
  color: red;
}

.sound {
  color: green;
}

<div id="app">
    <button @click="toggleActive('colour')"> Colours </button>
    <button @click="toggleActive('shape')"> Shapes </button>
    <button @click="toggleActive('sound')"> Sounds </button>
    <br/><br/>
    <span :class="{ colour: true, opacity: active && active != 'colour' }" >Yellow</span>
    <span :class="{ shape: true, opacity: active && active != 'shape' }">Triangle</span>
    <span :class="{ sound: true, opacity: active && active != 'sound' }">Woof</span>
    <span :class="{ shape: true, opacity: active && active != 'shape' }">Circle</span>
    <br/>
    <span :class="{ sound: true, opacity: active && active != 'sound' }">Meow</span>
    <span :class="{ colour: true, opacity: active && active != 'colour' }">Purple</span>
    <span :class="{ shape: true, opacity: active && active != 'shape' }">Circle</span>
    <span :class="{ colour: true, opacity: active && active != 'colour' }">Orange</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>