Блог

Главная - Вопросы по программированию - Как выполнить привязку к нескольким классам с помощью vue.js с событием щелчка?

Как выполнить привязку к нескольким классам с помощью vue.js с событием щелчка?

#javascript #html #css #vue.js #vue-directives

#javascript #HTML #css #vue.js #vue-директивы

Вопрос:

Удачных дней. Проблема, которую я пытаюсь решить, концептуально очень проста. Я новичок в работе с Vue.js и у меня есть некоторые проблемы с восприятием class binding . Я готовлю мини-проект, чтобы понять предмет. Вверху есть цветные кнопки, а внизу — область, которая меняет цвет при нажатии на эти кнопки. Сторона HTML

 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 событиями.

Комментарии:

1. Не могли бы вы пояснить, пожалуйста? Вы хотите добавить несколько классов одним событием щелчка или что?

Ответ №1:

Создайте activeClass свойство и привяжите его к окну результатов class . Важно отметить, что вы можете использовать class и :class одновременно. Оба применяются:

 <div class="result-box" :class="activeClass"></div>
 
 data() {
  return {
    activeClass: ''
  }
}

По щелчку измените activeClass :

 @click="activeClass = color.css_class"

Также привяжите классы к кнопкам. Собрать все это вместе:

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

Возможно, вы захотите уменьшить специфику ваших классов по умолчанию, или вы столкнетесь с небольшой сложностью при попытке присвоить приоритет связанному классу (или вы можете просто использовать !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>