В Vue.js есть несколько способов изменить значение при фокусе. Ниже я приведу наиболее распространенные подходы.
1. Использование директивы v-on и этапа события focus. Вы можете привязать обработчик события focus к элементу ввода и обновить значение данных или переменных при получении фокуса. Например:
<template>
<div>
<input type="text" v-on:focus="handleFocus" v-model="value" />
</div>
</template>
<script>
export default {
data() {
return {
value: ""
};
},
methods: {
handleFocus() {
this.value = "Новое значение";
}
}
};
</script>
2. Использование директивы v-model и события input. Вы можете отслеживать изменения значения элемента ввода с помощью директивы v-model и обновлять значение данных или переменных в методе, связанном с этой директивой. Например:
<template>
<div>
<input type="text" v-model="value" v-on:focus="handleFocus" />
</div>
</template>
<script>
export default {
data() {
return {
value: ""
};
},
methods: {
handleFocus() {
this.value = "Новое значение";
}
}
};
</script>
3. Использование вычисленного свойства. Вместо обновления значения напрямую, вы также можете использовать вычисленное свойство, чтобы возвращать измененное значение при фокусе. Например:
<template>
<div>
<input type="text" v-model="inputValue" v-on:focus="handleFocus" />
</div>
</template>
<script>
export default {
data() {
return {
value: ""
};
},
computed: {
inputValue() {
return this.value !== "" ? this.value : "Новое значение";
}
},
methods: {
handleFocus() {
this.value = "";
}
}
};
</script>
Вышеуказанные подходы позволят вам изменять значение при фокусе в элементе ввода в Vue.js. Выберите подход, который лучше всего соответствует вашим потребностям и структуре вашего приложения.