[Vue] Use Vue.js Watchers to Respond to Async Updates
2023-09-14 09:00:52 时间
Use watchers
to keep an eye on your data. Watchers are methods that are invoked when the specified attribute changes. They are useful when you want to perform asynchronous operations in response to changing data.
<template> <section class="container"> <item-description></item-description> <h1 class="title"> {{message | capitalize}} </h1> <button @click="changeMessage" class="button">Change Message</button> <hr> <section> <h2>Mouse event</h2> <div>{{counter}}</div> <div @mouseover="inc">Mouse over here to change counter</div> </section> <section> <h2>Keyboard events</h2> <form @submit.prevent="submit"> <input type="text" v-model="firstName" @keyup.enter="submit" @keyup.alt.ctrl.shift.down="keyeventHandler"/> <button v-bind:disabled="buttonDisabled">{{buttonText}}</button> </form> <div> {{key}} </div> </section> </section> </template> <style scoped> .title { margin: 50px 0; } </style> <script> import ItemDescription from '../components/item-description'; export default { data() { return { message: 'this is my vue!', counter: 0, key: "", firstName: "", buttonText: "Add" } }, computed: { buttonDisabled: function() { return this.firstName == ""; } }, watch: { firstName: function(){ this.buttonText = this.firstName !== "" ? "Add " + this.firstName : "Add Dinosaur"; } }, components: { ItemDescription }, filters: { capitalize(value) { return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase(); } }, methods: { changeMessage() { this.message = "Updated message here!" }, inc() { this.counter += 1; }, keyeventHandler() { this.key = "Ctrl + alt + shift + down is clicked" }, submit() { console.log("form is submitted, the value is", this.firstName); } } } </script>
相关文章
- js JavaScript vue 时间戳 转换 日期 YYYY-MM-DD hh:mm:ss 简洁写法
- vue单页面应用的原理
- Vue 源码设计与构建
- 3-Vue网络应用
- 当面试官问你Vue响应式原理,你可以这么回答他
- 能被“阿里爸爸”吹爆的SpringBoot+Vue全栈发手册到底多绝绝子?
- vue的双向绑定原理_vue2双向绑定原理
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- Vue.js – 引入外部 JS 文件
- 前端vue2+vue-router3+ElementUI+axios综合使用代码教程登录页案例
- 千姿百态,瞬息万变,Win11系统NeoVim打造全能/全栈编辑器(前端/Css/Js/Vue/Golang/Ruby/ChatGpt)
- 在 Vue.js 中通过计算属性动态设置属性值
- Vue 组件插槽:父子组件间的内容分发和插槽作用域
- vue cli 项目启动 HBuilderX 编辑器的使用
- vue.js客服系统实时聊天项目开发(八)使用axios post请求访客初始化接口
- SortableJS / vue.draggable.next 使用笔记,持续记录
- Vue值Router(路由)2
- 京东前端二面必会vue面试题(持续更新中)_2023-02-24
- Vue.js 中异常高效可用的 .sync 修饰符
- 使用JS在网页中连接Oracle数据库(js网页链接oracle)
- JS在Oracle中的应用(js如何oracle)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)