Vue.js提供了v-model指令用于双向数据绑定,比如在输入框上使用时,输入的内容会事实映射到绑定的数据上,绑定的数据又可以显示在页面里,数据显示的过程是自动完成的。
v-model
本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="app"> <p>Message is: {{message}}</p> <input v-model="message" placeholder="edit me" type="text"> </div> <script> Vue.config.productionTip=false; Vue.config.devtools=false; new Vue({el: '#app',data(){return { message:'' }}}) </script> </body> </html>
以上就是Vue.javascript源码分析(二十二)指令篇v-model指令详解。部下的素质低,不是你的责任;但不能提高部下的素质,是你的责任。更多关于Vue.javascript源码分析(二十二)指令篇v-model指令详解请关注haodaima.com其它相关文章!