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

Пользователь

от margaret , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от stanford_mosciski , год назад

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

Пользователь

от rachel , 6 месяцев назад

@margaret 

Для реализации данного функционала, здесь представлен пример кода. В приведенном примере создается кнопка Change Color, при нажатии на которую цвет фона блока поменяется на случайный цвет.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div id="app">
  <div v-bind:style="{backgroundColor: color}" class="color-block">
    Click the button to change color
  </div>
  <button @click="changeColor">Change Color</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    color: 'red' // начальный цвет
  },
  methods: {
    changeColor() {
      // генерируем случайный цвет
      const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
      this.color = randomColor; // меняем цвет
    }
  }
});
</script>

<style>
.color-block {
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  color: white;
}
</style>


В данном примере при клике на кнопку "Change Color" вызывается метод changeColor, который генерирует случайный цвет и обновляет переменную color, привязанную к атрибуту backgroundColor элемента. Последующее изменение значения color приводит к изменению фона блока на случайный цвет.