Я хотел бы динамически обновлять стили inside
теги стилей.
Однако при создании модели контейнера для Vue удаляются теги style
.
Я знаю, что теги стилей должны находиться в верхней части страницы, но это просто ради простоты использования.
Так что я хотел бы иметь обертку с тегами элемента и стиля внутри:
<div class="setting">
<style>
.setting input {
background: {{bgColor}};
}
</style>
<input class="setting" type="text" v-model="bgColor">
</div>
Значение из ввода должно обновить значение стиля CSS. Когда бы это ни делалось с простыми элементами div, это работает, но теги стиля кажутся проблемой
Ниже приводится настройка JavaScript:
new Vue({
el: '.setting',
data: {
bgColor: 'red'
}
});
Однако, если у тегов стиля есть определенный идентификатор, это может сработать, но я не могу связать его с полем ввода.
<style id="setting">
#blue {
background: {{bg}}
}
#blue:hover {
background: {{bgHover}}
}
</style>
<div id="blue"></div>
и JS:
new Vue({
el: '#setting',
data: {
bg: 'blue',
bgHover: 'red'
}
});
Может ли кто-нибудь помочь мне понять, как я могу добиться обновления значений между тегами стиля. jsfiddle настроен
Благодарю.