Для реализации смены текста при переключении между radio кнопками в Vue.js вам понадобится использовать data свойство для хранения текущего выбранного значения и связать его с radio кнопками при помощи директивы v-model.
Вот простой пример:
<template>
<div>
<input type="radio" id="option1" value="option1" v-model="selectedOption">
<label for="option1">Опция 1</label>
<input type="radio" id="option2" value="option2" v-model="selectedOption">
<label for="option2">Опция 2</label>
<input type="radio" id="option3" value="option3" v-model="selectedOption">
<label for="option3">Опция 3</label>
<div>{{ selectedText }}</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: 'option1',
selectedText: 'Вы выбрали Опцию 1',
};
},
watch: {
selectedOption(value) {
if (value === 'option1') {
this.selectedText = 'Вы выбрали Опцию 1';
} else if (value === 'option2') {
this.selectedText = 'Вы выбрали Опцию 2';
} else if (value === 'option3') {
this.selectedText = 'Вы выбрали Опцию 3';
}
},
},
};
</script>
В этом примере мы используем data свойство selectedOption для отслеживания выбранной опции. Затем мы связываем его со значениями radio кнопок при помощи директивы v-model.
Для отображения выбранного текста мы используем data свойство selectedText. При изменении выбранной опции в методе watch мы обновляем значение selectedText в соответствии с выбранной опцией.
Хотя это лишь простой пример, вы можете настроить его так, чтобы отображался любой текст или выполнялась любая логика, в зависимости от выбранной опции.