v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://www.jb51.net/js/Vue.js" charset="utf-8"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', data:{ msg:'welcome vue' } }); } </script> </head> <body> <div> <input type="text" v-model='msg'/> <br /> {{msg}} </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://www.jb51.net/js/Vue.js" charset="utf-8"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', data:{ msg:'welcome vue' } }); } </script> </head> <body> <div> <input type="text" v-model='msg'/> <br /> {{msg}} </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://www.jb51.net/js/Vue.js" charset="utf-8"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'.box', data:{ msg:'welcome vue' } }); } </script> </head> <body> <div> <input type="text" v-model='msg'/> <br /> <input type="text" v-model='msg'/> <br /> {{msg}} </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://www.jb51.net/js/Vue.js" charset="utf-8"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'.box', data:{ msg:'welcome vue', msg2:12, msg3:true, arr:['app','orange','pare'] } }); } </script> </head> <body> <div> <input type="text" v-model='msg'/> <br /> <input type="text" v-model='msg'/> <br /> {{msg}} <br /> {{msg2}} <br /> {{msg3}} <br /> {{arr}} </div> </body> </html>