Как программно добавить класс к элементу в vuejs при событии фокуса на соответствующем элементе ввода?

Question

Я новичок в VueJS. У меня есть элемент input и label в качестве его заполнителя, например:

<input type="text" placeholder="Mobile" v-model="firstName">
<label>First Name</label>

Когда я сосредотачиваюсь на input, я хочу добавить active класс к label тегу. Учтите, что в моей форме очень много таких входов. В противном случае я мог бы использовать переменную в разделе данных для решения этой проблемы. Также я мог бы решить эту проблему с помощью jQuery, но я не хочу. Можете ли вы помочь мне решить эту проблему с помощью VueJS инструментов, таких как директивы?

Answer 1

Для этого нужно javascript? Если вы просто хотите стилизовать метку, вы можете использовать:

input:focus + label {}

Но это будет работать, только если метка появится после ввода в html.