<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>双向数据绑定</title> <script type='text/javascript' src='./js/jquery.js'></script> <script type='text/javascript' src='./js/vue.js'></script> </head> <body> <section id='app'> <div>{{msg}}</div> <input type="text" v-bind:value="msg" v-on:input='handle($event)'> <input type="text" v-bind:value='msg' v-on:input='msg = $event.target.value'> <input type="text" v-model='msg'> </section> </body> <script> var vm = new Vue({ el:'#app', data: { msg: '你好！' }, methods: { handle: function(event){ this.msg = event.target.value; } } }) </script> </html>