Vue常用指令V-model用法 程序员文章站 2022-06-29 22:52:00 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/1581460.html"> Python两个整数相除得到浮点数值的方法 </a> </p> <p> 下一篇： <a href="/article/1581462.html"> 硬汉风格的色彩搭配技巧 适用任何必须用又不好用的颜色 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2040123.html" target="_blank" title="Vue.js常用指令之循环使用v-for指令教程"> <h2> Vue.js常用指令之循环使用v-for指令教程 </h2> </a> </li> <li> <a href="/article/2039519.html" target="_blank" title="Vue.js 中的 v-model 指令及绑定表单元素的方法"> <h2> Vue.js 中的 v-model 指令及绑定表单元素的方法 </h2> </a> </li> <li> <a href="/article/2027859.html" target="_blank" title="浅析SEO常用指令的用法技巧以及出现的问题"> <h2> 浅析SEO常用指令的用法技巧以及出现的问题 </h2> </a> </li> <li> <a href="/article/2012184.html" target="_blank" title="Vue.js 源码分析(二十二) 指令篇 v-model指令详解"> <h2> Vue.js 源码分析(二十二) 指令篇 v-model指令详解 </h2> </a> </li> <li> <a href="/article/1993460.html" target="_blank" title="vue的基本用法与常见指令"> <h2> vue的基本用法与常见指令 </h2> </a> </li> <li> <a href="/article/1989670.html" target="_blank" title="vue.js指令v-model使用方法"> <h2> vue.js指令v-model使用方法 </h2> </a> </li> <li> <a href="/article/1986727.html" target="_blank" title="详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on"> <h2> 详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on </h2> </a> </li> <li> <a href="/article/1978002.html" target="_blank" title="vue指令之表单控件绑定v-model v-model与v-bind结合使用"> <h2> vue指令之表单控件绑定v-model v-model与v-bind结合使用 </h2> </a> </li> <li> <a href="/article/1959648.html" target="_blank" title="vue.js 实现v-model与{{}}指令方法"> <h2> vue.js 实现v-model与{{}}指令方法 </h2> </a> </li> <li> <a href="/article/1950521.html" target="_blank" title="Vue.js自定义指令的用法与实例解析"> <h2> Vue.js自定义指令的用法与实例解析 </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>