Javascript Vue.js-更改除单击的元素之外的所有元素的颜色

我正在尝试从jQuery切换到Vue.js，我有点被这个问题困住了。我在页面上有3个按钮。当我点击一个按钮时，我希望所有其他按钮将背景颜色更改为绿色，并将被点击的按钮-将其颜色更改为黑色

使用jQuery只需要两行代码，但我不知道如何使用Vue.js来完成它。Vue.js中似乎也没有this关键字

另外，在这一点上，我只想应用原始css背景颜色属性，而不是应用一个类

这是我的jQuery代码-非常简单

<div class="main-content-area">    
  <div class="btn">Click me!</div>
  <div class="btn">Click me!</div>
  <div class="btn">Click me!</div>    
</div>

使用Vue.js-我只走了这么远

<div class="main-content-area">    
  <div class="btn" @click="changeColor">Click me!</div>
  <div class="btn" @click="changeColor">Click me!</div>
  <div class="btn" @click="changeColor">Click me!</div>    
</div>

---

将组件用于按钮：

HTML:

<div class="main-content-area">

    <my-custom-button component-type="my-custom-button" ></my-custom-button>
    <my-custom-button component-type="my-custom-button"></my-custom-button>
    <my-custom-button component-type="my-custom-button"></my-custom-button>

</div>

JavaScript:

Vue.component("my-custom-button",{
        template : '<div class="btn" :style="buttonStyles" @click="activeThisButton" >Click me!</div>',

    data(){
        return {
        isActive : false,
      }
    },

    computed : {
        buttonStyles(){
        return {
            backgroundColor : this.isActive  ? 'green' : '',
        }
      }
    },

    methods : {
        activeThisButton(){
        // call inactiveAllButtons on parent to deselect all buttons
        this.$root.inactiveAllButtons();
        // active current button
        this.isActive = true;
      }
    }
})

const Example = new Vue
({

    el: '.main-content-area',

    methods : {
        // filter children and find buttons ( by component-type property )
        // and inactive all .
        inactiveAllButtons(){
        var buttons = this.$children.filter(function(child) {
            return child.$attrs['component-type'] === 'my-custom-button';
        });
        for(var i = 0 ; i < buttons.length ; i++ ){
          buttons[i].isActive = false;
        }
      }
    }

});

Vue.component（“我的自定义按钮”{
模板：“单击我！”，
数据（）{
返回{
I：错，
}
},
计算：{
按钮样式（）{
返回{
背景颜色：this.isActive？'green'：''，
}
}
},
方法：{
activeThisButton（）{
//在父级上调用inactiveAllButtons以取消选择所有按钮
这是。$root.inactiveAllButtons（）；
//有源电流按钮
this.isActive=true；
}
}
})
const示例=新的Vue
({
el:“.主要内容区”，
方法：{
//筛选子项和查找按钮（按组件类型属性）
//和所有的。
不活动AllButtons（）{
var buttons=this.$children.filter（函数（子函数）{
返回子项。$attrs['component-type']=“我的自定义按钮”；
});
对于（变量i=0；i

---

这是一种更好的方法，不使用不安全的

$root

和

$children

<template>
  <div class="hello">
    <button class="btn" @click="activeButton = 0" v-bind:style="{'background-color':buttonColor[0]}">Click me!</button>
    <button class="btn" @click="activeButton = 1" v-bind:style="{'background-color':buttonColor[1]}">Click me!</button>
    <button class="btn" @click="activeButton = 2" v-bind:style="{'background-color':buttonColor[2]}">Click me!</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      activeButton: 0
    };
  },
  computed: { 
    buttonColor: function() {
      let result = [];
      for (var i = 0; i< 3; i++){
        if (this.activeButton == i){
          result.push('black');
        } else {
          result.push('green');
        }
      }

      return result;
    }
  }
};
</script>

---

当点击一个按钮时，它不会取消选择所有其他按钮。这是一个非常糟糕的方法。在这种情况下，您需要在父组件中保留状态，并且永远不要使用

$children

或

$root

。如果您使用其中任何一个，那么现在您的组件与包含的组件紧密耦合，这打破了将

vue.js

作为一个组件的想法framework@Archeg所以我们应该检查父对象上是否有方法，如果有，则调用它。如果你有更好的想法，请发表你的想法one@Zoha抱歉，我仍然认为这不是一个好主意，我真的建议您不要编写使用

$children

或

$root

的代码，除非确实需要。请看我的答案。谢谢你分享这个@Archeg。这是个好主意。但是，您能告诉我为什么不应该在vue中使用$root或$children吗。我有几个项目是我用过的。现在还没有问题：）@Zoha的想法是，除了显式地提供给组件的属性之外，每个组件都不应该知道它正在运行的环境（并且应该不需要任何东西）。您的组件对父级有一个隐式要求，即要有

inactiveAllButtons（）

方法。组件是应该在没有上下文的任何地方使用的构建块。如果您的构建块需要一些隐式规则，那么它们就不再是组件，并且变得更难使用。相反，您应该使用

props

和

$emit（）

@Zoha。不幸的是，我找不到一篇关于这方面的好文章（我只是不善于找到好的读物），但我很确定，如果您在这里问一个问题，为什么组件对父级一无所知，有人会写一个更好的解释。只需查看

$parent

属性文档：

谨慎使用$parent和$children-它们主要用作逃生舱口。更喜欢使用道具和事件进行亲子沟通。

@Zoha我还想指出，这并不意味着您应该立即更改代码。如果它起作用，那就好了。我只是想在回答问题时遵循最佳实践，因为人们在这里学习，一旦习惯了，就很难从人们的脑海中抹去糟糕的实践

<template>
  <div class="hello">
    <button class="btn" @click="activeButton = 0" v-bind:class="{'greenBtn':true, 'blackBtn': activeButton == 0}">Click me!</button>
    <button class="btn" @click="activeButton = 1" v-bind:class="{'greenBtn':true, 'blackBtn': activeButton == 1}">Click me!</button>
    <button class="btn" @click="activeButton = 2" v-bind:class="{'greenBtn':true, 'blackBtn': activeButton == 2}">Click me!</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      activeButton: 0
    };
  },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .greenBtn {
   background-color: green
 }

 .blackBtn {
   background-color: black
 }
</style>