- v-model-- 双向数据绑定
- number修饰指令
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>number</title> </head> <body id="app"> <input type="text" v-model="num" number > {{num}} </body> <script src="../../bower_components/vue/dist/vue.js"></script> <script> var vm=new Vue({ el:'#app', data:{ num:23 } }); //修饰符 number部分源码 /* export function toNumbet(value){ if (typeof value !== "string"){ return value }else { var parsed = Number(value) return isNaN(parse)? value : parsed } */ </script> </html>
2.debounce--不同于filter中的debounce,它们的实现原理相似(settimeout),作用不同,该指令用于延迟用户输入数据同步到model中的时间,并不能延迟用户输入事件的延迟所以想要获取变化后的数据,用$watch()监听;而事件的延迟filter中的debounce
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>debounce</title> </head> <body id="app"> <input type="text" v-model="refresh" debounce="1000"> <p>{{refresh}}</p> </body> <script src="../../bower_components/vue/dist/vue.js"></script> <script> var vm=new Vue({ el:'#app', data:{ refresh:'' } }) </script> </html>
Solve problems in the most elegant way
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步