如何使用 vue.js 与点击事件进行 multi-class 绑定？

Question

祝你身体健康。我要解决的问题在概念上非常简单。我刚开始使用 Vue.js，我对 class binding 有一些看法问题。我正在准备一个迷你项目来理解这个主题。顶部有颜色按钮，底部有一个区域，单击这些按钮时会改变颜色。 HTML side

const app = Vue.createApp({
        data(){
          return {
            color_palette : [
              {
                index : 1,
                id : "red",
                css_class : "red-box"
              },
              {
                index : 2,
                id : "blue",
                css_class : "blue-box"
              },
              {
                index : 3,
                id : "green",
                css_class : "green-box"
              },
              {
                index : 4,
                id : "yellow",
                css_class : "yellow-box"
              }
            ],
            
          }
        },
        
        
      }).mount('#app');

.container {
  width: 100%;
  height: auto;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.css--class--app .css--palette {
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.css--class--app .css--palette li {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  border-radius: 50%;
  margin-left: 5px;
  border: 1px solid #bbb;
}

.css--class--app .result-box {
  width: 100%;
  height: 100px;
  background-color: #18bf71;
  margin-top: 15px;
  border-radius: 5px;
  border-bottom: 1px solid #ccc;
  -webkit-transition: background-color 0.5s;
  transition: background-color 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<header>CSS Class App</header>
    <div class="container css--class--app" id="app">
      <div class="card text-center">
        <ul class="css--palette text-center">
          <li v-for="color in color_palette" ></li>
        </ul>
        <div class="result-box" ></div>
      </div>
    </div>

在这种情况下，定义按钮需要什么样的click事件？我不想复制并粘贴答案。我只是想要一个解释来理解 class binding 与多个 click 事件的概念。

Answer 1

创建一个 activeClass 属性并将其绑定到结果框 class。需要注意的重要一点是，您可以同时使用 class 和 :class。两者都适用：

<div class="result-box" :class="activeClass"></div>

data() {
  return {
    activeClass: ''
  }
}

单击时，更改 activeClass：

@click="activeClass = color.css_class"

还将 classes 绑定到按钮。把它们放在一起：

<li v-for="color in color_palette"
    :class="color.css_class"
    @click="activeClass = color.css_class"></li>

您可能希望降低默认 classes 的特异性，否则在尝试优先考虑绑定 class（或者您可以只使用 !important)。这是一个演示：

const { createApp } = Vue;
const app = createApp({
  data(){
    return {
      activeClass: '',
      color_palette : [
        {
          index : 1,
          id : "red",
          css_class : "red-box"
        },
        {
          index : 2,
          id : "blue",
          css_class : "blue-box"
        },
        {
          index : 3,
          id : "green",
          css_class : "green-box"
        },
        {
          index : 4,
          id : "yellow",
          css_class : "yellow-box"
        }
      ],
    }
  }
});
app.mount("#app");

.container {
  width: 100%;
  height: auto;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.css--class--app .css--palette {
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.css--class--app .css--palette li {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  border-radius: 50%;
  margin-left: 5px;
  border: 1px solid #bbb;
}

.css--class--app .result-box {
  width: 100%;
  height: 100px;
  background-color: #18bf71;
  margin-top: 15px;
  border-radius: 5px;
  border-bottom: 1px solid #ccc;
  -webkit-transition: background-color 0.5s;
  transition: background-color 0.5s;
}

.css--class--app .red-box {
  background: red !important;
}
.css--class--app .blue-box {
  background: blue !important;
}
.css--class--app .green-box {
  background: green !important;
}
.css--class--app .yellow-box {
  background: yellow !important;
}

<div id="app" class="">
  <header>CSS Class App</header>
  <div class="container css--class--app" id="app">
    <div class="card text-center">
      <ul class="css--palette text-center">
        <li v-for="color in color_palette"
            :class="color.css_class"
            @click="activeClass = color.css_class"></li>
      </ul>
      <div class="result-box" :class="activeClass"></div>
    </div>
  </div>
</div>

<script src="https://unpkg.com/vue@next"></script>

如何使用 vue.js 与点击事件进行 multi-class 绑定？

How to do multi-class binding using vue.js with click event?

html

javascript

css

vue.js

vue-directives