Как по клику на кнопку поменять цвет в vue.js?

@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 будет меняться и цвет элемента.