Как обращаться к определенным элементам на странице в Vue.js?

Question

[Иван Иванов]

<div class="example">Привет</div>

Если в js я мог классу example присвоить еще один какой-то класс проделав:

let dot = document.getElementsByClassName('dot');
dot.classList.add('example2');

или использовать dot.style.display = 'none',,
то как всё это делать на Vue?

Answer 1

[Сергей delphinpro]

Когда вы пишете на вью, вы должны ориентироваться на состояние данных. Грубо говоря, императивный подход здесь не совсем в тему.
Вы не должны писать "по клику присвоить класс"
Вместо этого вы должны делать так

data() {
  return {
    isShowHelloBlock: false,
  }
}
<div :class="{someClass : isShowHelloBlock}">Hello</div>
<button @click="isShowHelloBlock = true">toggle block</button>

Изменяя состояние, вы изменяете представление.

Comments

[origami1024]

"isShowHelloBlock", уровень английского - китайский диалект международного американского)

[Сергей delphinpro]

origami1024, здесь не английский важен, а назначение переменной.

helloBlockIsVisible
isVisibleHelloBlock

давая имена переменным, не всегда нужно опираться на грамматику языка.

Answer 2

[Алекс Глебов]

Во вью логика шаблона в шаблоне
В js только работа с данными
https://ru.vuejs.org/v2/guide/class-and-style.html
https://ru.vuejs.org/v2/guide/conditional.html