Как убрать класс в vue.js

Question

Поскольку я новичок в Vue.js, кто-нибудь может мне помочь, как удалить класс из элемента так же, как мы делаем в JQuery.

$('.class1').removeClass("class2");

Answer 1

Если у вас есть этот элемент

<div id="randomDiv">
  <p :style="{backgroundColor:color}" @click="updateBackgroundColor(color)">{{obj.name}}</p>
</div>

, то : style позволяет добавить стиль к элементу, в данном случае это backgroundColor стиль, который мы добавляем, это может быть что угодно, и вы можете видеть, что у него есть значение цвета, которое обозначено ниже как объект Vue.Первоначально для объекта vm = new Vue () установлен желтый цвет.Этот объект также имеет функцию с именем updateBackgroundColor , которая выполняет обновление.Цвет передается в эту функцию из @ click в элементе.

var obj = {
  "name": "Curtis",
}


var vm = new Vue({
  el: '#randomDiv',
  data: function (){
    return  {
        obj,
        color: 'yellow',
    }
  },
  methods: {
        updateBackgroundColor: function (color) {
        console.log(color);
          if(color === "yellow"){
            this.$set(this.$data, 'color', 'red');
          }
          else{
            this.$set(this.$data, 'color', 'yellow');
          }
        }
    }
});

Я также вставил это в JsFiddle, чтобы вы увидели.

[https://jsfiddle.net/ifelabolz/todqxteh/1044/][1]

Answer 2

Из того, что написано в их документации, я бы сказал, что вы не должны делать это в своем коде.

Вместо этого ваши CSS-классы должны быть привязаны к свойствам, а наличие класса должно определяться значением свойства.

Пример (из документов):

<div v-bind:class="{ active: isActive }"></div>

приведенный выше синтаксис означает, что наличие класса active будет определяться достоверностью свойства данных isActive (если isActive IS true - класс будет там).

Вы можете иметь несколько классов, переключаемыхбольше полей в объекте.Кроме того, директива v-bind:class может также сосуществовать с атрибутом простого класса.Так дан следующий шаблон:

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

И следующие данные:

data: {
  isActive: true,
  hasError: false
}

Будет отображаться:

<div class="static active"></div>

Когда isActive или hasErrorизменения, список классов будет обновляться соответственно.Например, если hasError станет истинным, список классов станет static active text-danger.

Я считаю, что это правильный путь :) Пожалуйста, проверьте документацию для получения более подробной информации.

Если по какой-то причине вам нужно удалить класс, вы можете добавить jQuery в качестве зависимости к своему приложению и использовать его (но это не является предпочтительным).

Удачного взлома:)