vue watch
<template>
<div>
<input v-model="message" />
<p>{{ reversedMessage }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: '',
reversedMessage: ''
};
},
watch: {
message(newVal) {
this.reversedMessage = newVal.split('').reverse().join('');
}
}
};
</script>
In this example, a Vue component is created with an input field bound to the message
data property and a paragraph element displaying the reversedMessage
data property. The watch
option is used to watch changes to the message
property, and when it changes, the message
is reversed and assigned to the reversedMessage
property.