<body> <div> <h2>{{title}}</h2> <input v-model="name"> <h1>{{name}}</h1> <button v-on:click="clickMe">click me!</button> </div> </body> <script src="https://www.jb51.net/js/observer.js"></script> <script src="https://www.jb51.net/js/watcher.js"></script> <script src="https://www.jb51.net/js/compile.js"></script> <script src="https://www.jb51.net/js/index.js"></script> <script type="text/javascript"> new SelfVue({ el: '#app', data: { title: 'hello world', name: 'canfoo' }, methods: { clickMe: function () { this.title = 'hello world'; } }, mounted: function () { window.setTimeout(() => { this.title = '你好'; }, 1000); } }); </script>
是不是看起来跟vue的使用方法一样，哈，真正的大功告成！想要代码，直接点击这里获取！现象还没描述？直接上图！！！请观赏
其实这个效果图，就是本文开头贴出来的效果图了，前文说着要带着大家实现，所以就在这里把图再贴一次了，这叫首尾呼应嘛。
最后希望本文对你有帮助，如果有问题请留言一起探讨。
以上所述是小编给大家介绍的vue双向绑定原理及实现详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: