screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <h3>Vue track changes in textarea</h3> <div id="app"> <textarea v-model="currentValue" @input="onInput"></textarea> <button @click="undo">Undo</button> <button @click="redo">Redo</button> </div> <script type="module"> const app = Vue.createApp({ data() { return { currentValue: '', history: [], future: [] } }, methods: { onInput(event) { const newValue = event.target.value; this.future = []; this.history.push(newValue); }, undo() { if (this.history.length > 0) { const previousValue = this.history.pop(); this.future.push(this.currentValue); this.currentValue = previousValue; } }, redo() { if (this.future.length > 0) { const nextValue = this.future.pop(); this.history.push(this.currentValue); this.currentValue = nextValue; } } } });app.mount('#app'); </script> <style scoped> textarea { width: 100%; height: 200px; padding: 10px; font-size: 16px; border: 1px solid #ccc; } button { padding: 10px 20px; font-size: 16px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; margin-right: 10px; } button:hover { background-color: #0062cc; } button:disabled { background-color: #ccc; cursor: default; } </style> </body> </html>