App.vue
main.js
<template>
<h2>Example $watch() Method</h2>
<p>The $watch() method runs the callback function every time a change in the 'value' data property is detected.</p>
<div>
<p><input type="range" min="0" max="10" v-model="value"> Current value: {{ value }}</p>
<ol>
<li v-for="x in results">{{ x }}</li>
</ol>
</div>
</template>
<script>
export default {
data() {
return {
value: 4,
results: []
};
},
mounted() {
this.$watch('value', function() {
this.results.push('$watch() method')
})
}
};
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
}
</style>
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')