Как переделать это код на vue js? [дубликат]

115
30 марта 2021, 18:10
На этот вопрос уже дан ответ здесь:
vue js скрыть Input при клике на кнопку (1 ответ)
Закрыт 1 год назад.

Есть код на jquery который при клике на элемент меняет значение display другого элемента:

$('.header__user-image').click( function(){
    $('.header__list').toggleClass('header__list_active');
});

Как переделать этот код на Vue.js, и куда его вставлять? ( в main.js или в Component.vue ? )

Answer 1

const app = new Vue({ 
  el: '#app', 
  data: { 
    active: true, 
  }, 
  methods: { 
    example(){ 
      this.active = !this.active; 
      console.log(this.active); 
    }, 
  }, 
})
.blue{ 
  color:blue; 
} 
.red{ 
  color:red; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<div id="app"> 
  <template> 
    <div 
      @click="example" 
    > 
      <span 
        :class="{blue:active, red:!active}" 
      > 
        Привет 
      </span> 
    <div> 
  </template> 
</div>

Документация.

Answer 2

Где то в разметке:

Элемент, по которому надо кликнуть:

<img @click="myFuncton" />

Элемент, которому надо поменять класс:

<div ref='myElement'></div>

Где то в vue:

...
methods: {
  myFunction(){
    this.$refs.myElement.toggleClass('header__list_active');
  }
}
...
READ ALSO
Ошибка при использовании тега &lt;a href=&ldquo; &rdquo;&gt;
HTML

Ошибка при использовании тега <a href=“ ”>

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

 116
Проблема с вёрсткой, позиционирование
HTML

Проблема с вёрсткой, позиционирование

В общем проблема в том, что не могу поставить footer в самый низ страницы, он постоянно куда-то скачетВот пример где он сейчас https://o525

 126
Обязательные input в таблицу
HTML

Обязательные input в таблицу

День добрый

 119
Перенос строки таблицы в калькуляторе
HTML

Перенос строки таблицы в калькуляторе

Будьте добры, подскажите как в калькуляторе сделать из одной строки две строки? пробовал через tr, не работаетМне необходимо ячейки друг над...

 136