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

@jeromy_ruecker 

Вот простой пример, как поменять цвет при клике на кнопку в Vue.js:

HTML-разметка:

1
2
3
4

<div id="app">
  <button v-on:click="changeColor">Сменить цвет</button>
  <div v-bind:style="{ background: color }">Цвет изменен</div>
</div>

JavaScript-код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

new Vue({
  el: '#app',
  data: {
    color: 'white'
  },
  methods: {
    changeColor: function () {
      this.color = 'red';
    }
  }
})

В данном примере используется директива v-on:click, чтобы отслеживать клик на кнопке. В методе changeColor мы обновляем значение свойства color на 'red', что изменяет цвет фона блока с помощью директивы v-bind:style.

Можно менять и другие свойства стилей, добавлять/удалять CSS-классы, использовать анимации и т.д. в зависимости от требований вашего проекта.

@jeromy_ruecker 

Вот пример, как изменить цвет кнопки при клике в Vue.js:

HTML-разметка:

1
2
3

<div id="app">
  <button v-on:click="changeColor">Изменить цвет</button>
</div>

JavaScript-код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

new Vue({
  el: '#app',
  data: {
    buttonColor: 'blue',
  },
  methods: {
    changeColor: function() {
      this.buttonColor = 'red';
    }
  },
});

В данном примере используется директива v-on:click, чтобы отслеживать клик на кнопке. В методе changeColor мы обновляем значение свойства buttonColor на 'red', что меняет цвет кнопки.