В данном Vue.js компоненте вы можете изменить стиль компонента, когда передается новый стиль через props, используя вычисляемое свойство или директиву v-bind.
Для изменения цвета кнопки при изменении props вам можно использовать директиву v-bind:class или вычисляемое свойство. Вот примеры обоих подходов:
1. Использование директивы v-bind:class:
```
<template>
<button :class="buttonClass">Button</button>
</template>
<script>
export default {
props: {
newStyle: {
type: String,
required: true
}
},
computed: {
buttonClass() {
return this.newStyle === 'blue' ? 'blue-button' : 'red-button';
}
}
};
</script>
<style>
.blue-button {
background-color: blue;
color: white;
}
.red-button {
background-color: red;
color: white;
}
</style>
```
В этом примере используется директива `v-bind:class` для привязки класса `buttonClass` к элементу `<button>`. В зависимости от значения `newStyle` будет применяться нужный класс (`blue-button` или `red-button`), что изменит цвет кнопки на соответствующий.
2. Использование вычисляемого свойства:
```
<template>
<button :style="{ backgroundColor: buttonColor }">Button</button>
</template>
<script>
export default {
props: {
newStyle: {
type: String,
required: true
}
},
computed: {
buttonColor() {
return this.newStyle === 'blue' ? 'blue' : 'red';
}
}
};
</script>
```
В этом примере используется вычисляемое свойство `buttonColor`, которое возвращает значение цвета в зависимости от значения `newStyle`. Это значение используется в `v-bind:style`, чтобы задать фоновый цвет кнопки.
Оба подхода позволяют изменять стиль компонента, когда передается новый стиль через props. Выберите подход, который лучше подходит вашим потребностям и стилю кода.