Vue常用指令V-model用法 程序员文章站 2023-11-18 22:57:04 v-model这个指令只能用在, ,这些表单元素上，所谓双向绑定，指的就是我们在js中...</div> <div class="content"> <p>v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。<br></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> <div class="info-pre-next"> <p> 上一篇： <a href="/article/2149321.html"> Nginx下301重定向域名的方法小结 </a> </p> <p> 下一篇： <a href="/article/2149324.html"> 计算一段日期内的周末天数的php代码（星期六，星期日总和） </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2193264.html" target="_blank" title="vue.js 实现v-model与{{}}指令方法"> <h2> vue.js 实现v-model与{{}}指令方法 </h2> </a> </li> <li> <a href="/article/2185003.html" target="_blank" title="浅谈vue中关于checkbox数据绑定v-model指令的个人理解"> <h2> 浅谈vue中关于checkbox数据绑定v-model指令的个人理解 </h2> </a> </li> <li> <a href="/article/2175659.html" target="_blank" title="Vue.js常用指令汇总（v-if、v-for等）"> <h2> Vue.js常用指令汇总（v-if、v-for等） </h2> </a> </li> <li> <a href="/article/2171483.html" target="_blank" title="Vue常用的几个指令附完整案例"> <h2> Vue常用的几个指令附完整案例 </h2> </a> </li> <li> <a href="/article/2149323.html" target="_blank" title="Vue常用指令V-model用法"> <h2> Vue常用指令V-model用法 </h2> </a> </li> <li> <a href="/article/2135202.html" target="_blank" title="vue（2）—— vue简单语法运用，常用指令集"> <h2> vue（2）—— vue简单语法运用，常用指令集 </h2> </a> </li> <li> <a href="/article/2112695.html" target="_blank" title="如何理解Vue的v-model指令的使用方法"> <h2> 如何理解Vue的v-model指令的使用方法 </h2> </a> </li> <li> <a href="/article/2103513.html" target="_blank" title="详解Vue.js自定义tipOnce指令用法实例"> <h2> 详解Vue.js自定义tipOnce指令用法实例 </h2> </a> </li> <li> <a href="/article/2091279.html" target="_blank" title="又一款MVVM组件 Vue基础语法和常用指令（1）"> <h2> 又一款MVVM组件 Vue基础语法和常用指令（1） </h2> </a> </li> <li> <a href="/article/2083837.html" target="_blank" title="vue.js指令v-model实现方法"> <h2> vue.js指令v-model实现方法 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>