Добавьте v-bind: класс программно

Question

Чтобы добавить класс программно, я могу использовать что-то вроде этого:

this.$refs.mycells[123].classList.add('my-class')

Но как я могу добавить класс v-bind, как это программно?

v-bind:class="{ active: radio == 'link'}"

Answer 1

Мы можем связать классы непосредственно в элементе или вызвать функцию для размещения соответствующих классов.

 <p v-bind:class="user.role === 'admin' ? 'is_admin' : 'is_user'"></p>

Та же логика может быть помещена в функцию, как показано ниже

  <p :class="placeAppropriateClass(user.role)"></p>

//

 methods:{
     placeAppropriateClass(role){
        let addClass = ''; 
        if(role === 'admin'){
            addClass = 'is_admin';
        }else if(role === 'user'){
            addClass = 'is_user';
        }else{
            addClass='is_guest';
        }
        return addClass;
     }
 }

Это добавит класс к тегу p в соответствии с условным оператором.

 <p class="is_admin"></p>  

Answer 2

Вы можете добавить класс как объект программно, просто объявив имена реагирующих свойств данных "cssClass"

data: {
  cssClass: {
    active: true,
    'text-danger': false
  }
}, 

Есть два способа изменения, используя некоторые методы триггера событий или вычисленные свойства, когдаизменяются зависимые данные, обновляется значение

<div v-bind:class="cssClass">
<button v-on:click="onButtonClick"></button>
</div>

methods: {
 onButtonClick() { // if you want ro trigger from 
   // you can manipulate object
   this.cssClass = { active: false, 'text-danger': true }
 },
} 

Использование вычислено:

<div v-bind:class="setCssClass(true)"></div>

computed: {
  setCssClass(val) {
    if (val == true) return { active: false, 'text-danger': true };
    return { active: false, 'text-danger': true };
  }
}