Каков наилучший способ v-bind для :hover :active и тд, и можно ли вообще так сделать?

Question

[Артем Прохоров]

Можно спокойно добавить стили html тегу с помощью :style

let css = {width: '100%', borderRadius: '10px'}
<input :style="css" />

Но что мне делать, если я хочу так же указать стили для :hover, -autofill, :not:(:last-of-type) и тд?

Answer 1

[Aetae]

Вопрос по большому счёту не относится к vue.

Решения:
1. Использовать класс-модификатор, который порасит как надо.

<template>
  <input class="hover--red"/>
</template>

<style>
.hover--red:hover {
  color: #f00
}
</style>

2. Использовать css (не путать с scss) переменные.

<script setup>
// ...
const hoverColor = '#f00'
</script>

<template>
  <input :style="{'--hover-color': hoverColor}"/>
</template>

<style>
input:hover {
  color: var(--hover-color)
}
</style>

...upd: совсем забыл про такую фичу vue:
3. Если стили лежат в sfc можно использовать переменные через v-bind в <style>:

<script setup>
// ...
const hoverColor = '#f00'
</script>

<template>
  <input />
</template>

<style>
input:hover {
  color: v-bind(hoverColor)
}
</style>

А забыл я про неё потому, что категорически против такого смешения кода и стилей. Но я не могу вам запретить.:)

Comments

[Артем Прохоров]

Большое спасибо