Можно ли как-то изменить цвет placeholder vueJS

Question

Я хочу сделать подобие валидатора с помощью vueJS. У меня есть метод addHandler, который проверяет значение введенное в инпут, если оно пустое, то надпись placeholdera меняется. Как можно сделать, чтобы вместе с изменением текста placeholdera, менялся также его цвет на красный?

   <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="theme.css">
    <title>Document</title>
</head>

<body>
<div class="container" id="app">
    <div class="card">
        <h1>Заметки</h1>
        <div class="form-control">
            <input 
            type="text" 
            :placeholder="placeholder"
            :value="inputValue" 
            @input="inputChange"
            @keypress.Enter="addHandler"
            />
        </div>
        <button class="btn" @click="addHandler">Добавить</button>
        <hr />
        <ul class="list" v-if="notes.length !== 0">
            <li class="list-item" v-for="(note, i) in notes">{{ note }}
                <button class="btn danger" @click="removeNote">Удалить</button>
            </li>
        </ul>
        <div v-else>Список пуст</div>
    </div>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script src="app.js"></script>

const App = {
data() {
    return {
        placeholder: 'Название заметки..',
        inputValue: '',
        notes: [],
        placeholderColor: false,
    }
},
methods: {
    inputChange(event) {
        this.inputValue = event.target.value;
    },
    addHandler() {
        if (this.inputValue === '') {
            this.placeholder = 'Введите валидные данные';
            this.placeholderColor = true;
        } else {
            this.notes.push(this.inputValue);
            this.placeholder = 'Название заметки..'
            this.inputValue = '';
        }
    },
    removeNote(i) {
        this.notes.splice(i, 1)
    },
    toUpperCase(item) {
        return item.toUpperCase();
    }
}

}

Vue.createApp(App).mount('#app');

Answer 1

https://developer.mozilla.org/ru/docs/Web/CSS/::placeholder

::placeholder {
  color: blue;
  font-size: 1.5em;
}

<input placeholder="test">

В качестве отправной точки. Если нужна дополнительная помощь - спрашивайте.

БЛОГ НА HUSL

Можно ли как-то изменить цвет placeholder vueJS

Ответы (1 шт):