@margaret
В Vue.js для изменения цвета по клику на кнопку можно использовать переменную в качестве индикатора текущего цвета и директиву v-bind
для привязки этой переменной к атрибуту style
элемента.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
Изменить цвет export default { data() { return { color: 'red' // начальный цвет } }, methods: { changeColor() { // генерируем случайный цвет const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16); this.color = randomColor; // меняем цвет } } } |
В этом примере создается кнопка, при нажатии на которую генерируется случайный цвет. Этот цвет записывается во внутреннюю переменную color
, которая привязана к атрибуту style
элемента <div>
. Таким образом, при изменении значения color
будет меняться и цвет элемента.