Как в Vue3 присвоить класс элементу при нажатии на радиокнопку?

  • 8 августа 2023 г. 5:11
Ответы на вопрос 1
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" этот класс удаляется.
Похожие вопросы