У меня есть ‹input› в моем HTML, который может установить цвет фона на ‹p› как встроенный стиль. Я экспериментировал с двумя способами настройки стиля, и я не понимаю одного конкретного поведения: если я наберу синий, оба абзаца станут синими. Но затем, если я делаю возврат, абзац 2 остается синим до тех пор, пока поле ввода не станет пустым или не будет иметь другой допустимый цвет (например, возврат от желто-зеленого к желтому), что для меня странно. Параграф 1, с другой стороны, имеет ожидаемое поведение: если ввод не является допустимым цветом, он не стилизован.
Я предполагаю, что это как-то связано с тем, как Vue преобразует объект стиля в настоящие стили CSS. Как это работает? (На всякий случай: я совершенно новичок в Vue.js)
HTML:
<section id="assignment">
<input type="text" v-model="bgc" />
<p :style="bgcInlineStyle">Paragraph 1</p>
<p :style="{backgroundColor: bgc}">Paragraph 2</p>
</section>
JS:
const app = Vue.createApp({
data() {
return {
bgc: "",
};
},
computed: {
bgcInlineStyle() {
return `background-color:${this.bgc};`;
},
},
});
app.mount("#assignment");
