v-model这个指令只能用在,,这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。 </p> <div class="jb51code"> <pre class="brush:js;"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../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 id="box"> <input type="text" v-model='msg'/> <br /> {{msg}} </div> </body> </html> </pre> </div> <div class="jb51code"> <pre class="brush:js;"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../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 id="box"> <input type="text" v-model='msg'/> <br /> {{msg}} </div> </body> </html></pre> </div> <div class="jb51code"> <pre class="brush:js;"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../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 class="box"> <input type="text" v-model='msg'/> <br /> <input type="text" v-model='msg'/> <br /> {{msg}} </div> </body> </html> </pre> </div> <div class="jb51code"> <pre class="brush:js;"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../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 class="box"> <input type="text" v-model='msg'/> <br /> <input type="text" v-model='msg'/> <br /> {{msg}} <br /> {{msg2}} <br /> {{msg3}} <br /> {{arr}} </div> </body> </html></pre> </div> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。</p><div class="topcard-tags"><a href="https://m.jb51.cc/tag/model/" class="tag_link" target="_blank">model</a><a href="https://m.jb51.cc/tag/modeluejs/" class="tag_link" target="_blank">modelue.js</a><a href="https://m.jb51.cc/tag/modelue2/" class="tag_link" target="_blank">modelue2</a><a href="https://m.jb51.cc/tag/vue/" class="tag_link" target="_blank">vue</a><a href="https://m.jb51.cc/tag/pvue/" class="tag_link" target="_blank">vue</a></div> </div> </div> </div> <!-- row end--> <div class="clearfix"></div> <!-- row --> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>相关文章</h1></div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/vue/4758425.html" title="Vuex- Action的 { commit }的写法">Vuex- Action的 { commit }的写法</a> </div> <div class="summary">https://segmentfault.com/a/1190000022018995 https://www....</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/vue/4758424.html" title="ES6模块之export和import详解">ES6模块之export和import详解</a> </div> <div class="summary">ES6 （ECMAScript 6）中的模块是一个包含 JavaScript 代码的...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/vue/4758423.html" title="Vue知识点汇总（含Vue3）">Vue知识点汇总（含Vue3）</a> </div> <div class="summary"> <img src="https://m.jb51.cc/res/2024/02-26/00/9e5937e2a2213259aa3d170851217804.png" width="100" height="64" style="float:right;margin-left:20px;" />from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ V...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/vue/4758422.html" title="npm init vite@latest vue3study --template vue">npm init vite@latest vue3study --template vue</a> </div> <div class="summary"> <img src="https://m.jb51.cc/res/2024/02-26/00/edb169e277f3bd8c2291e8067b5ada03.png" width="100" height="64" style="float:right;margin-left:20px;" />D:\Temp>npm init vite@latest vue3study --temp...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/vue/4747370.html" title="Vue 中使用消息总线让两个滚动条同步滚动">Vue 中使用消息总线让两个滚动条同步滚动</a> </div> <div class="summary"> <img src="https://m.jb51.cc/res/2024/01-14/16/54f581e1f42c922760a34123e2f80ff7.png" width="100" height="64" style="float:right;margin-left:20px;" />文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/vue/4747369.html" title="Vue + lodop 静默打印">Vue + lodop 静默打印</a> </div> <div class="summary"> <img src="https://m.jb51.cc/res/2024/01-14/16/cd3dad3f3ca42c5b9c1b0cec64174ae8.png" width="100" height="64" style="float:right;margin-left:20px;" />文章浏览阅读3.3k次，点赞3次，收藏16次。静默打印是什么？简...</div> </div></div> </div> <!-- row end--> </div> </div> <footer id="footer"> <div class="container"> <div class="copyright"> Copyright © 2018 编程之家. 当前版本 V7.0.16<br> <span class="ml5">编程之家 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a> </div> </div> </footer> <script src="https://m.jb51.cc/js/count.js"></script> </body> </html>
