Vue.js предоставляет возможность динамически добавлять и изменять классы HTML с помощью привязки данных. Можно использовать `v-bind:class` для привязки класса в HTML к данным в Vue.js.
Возьмем пример, в котором при нажатии на радиокнопку будет присваиваться класс элементу:
```html
<template>
<div>
<input type="radio" id="choice1" value="Choice1" v-model="picked" @click="applyClass">
<label for="choice1">Choice1</label>
<input type="radio" id="choice2" value="Choice2" v-model="picked" @click="removeClass">
<label for="choice2">Choice2</label>
<p :class="{ red: isActive }">This text should change color when Choice 1 is clicked.</p>
</div>
</template>
<script>
export default {
data() {
return {
picked: '',
isActive: false // Флаг для присвоения/удаления класса
}
},
methods: {
applyClass() {
this.isActive = true; // При выборе Choice1 присваиваем флагу значение true
},
removeClass() {
this.isActive = false; // При выборе Choice2 присваиваем флагу значение false
}
}
}
</script>
<style scoped>
.red {
color: red;
}
</style>
```
В примере при выборе радиобаттона "Choice 1" тексту привязывается класс "red", а при выборе "Choice 2" этот класс удаляется.