Vue常用指令V-model用法

2024-02-28 00:12:03 142

v-model这个指令只能用在,这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。<br/> </p> <pre> <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title></title> <scriptsrc="../js/Vue.js"charset="utf-8"></script> <scripttype="text/javascript"> window.onload=function(){ varvm=newVue({ el:'#box', data:{ msg:'welcomevue' } }); } </script> </head> <body> <divid="box"> <inputtype="text"v-model='msg'/> <br/> {{msg}} </div> </body> </html> </pre> <pre> <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title></title> <scriptsrc="../js/Vue.js"charset="utf-8"></script> <scripttype="text/javascript"> window.onload=function(){ varvm=newVue({ el:'#box', data:{ msg:'welcomevue' } }); } </script> </head> <body> <divid="box"> <inputtype="text"v-model='msg'/> <br/> {{msg}} </div> </body> </html></pre> <pre> <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title></title> <scriptsrc="../js/Vue.js"charset="utf-8"></script> <scripttype="text/javascript"> window.onload=function(){ varvm=newVue({ el:'.box', data:{ msg:'welcomevue' } }); } </script> </head> <body> <divclass="box"> <inputtype="text"v-model='msg'/> <br/> <inputtype="text"v-model='msg'/> <br/> {{msg}} </div> </body> </html> </pre> <pre> <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title></title> <scriptsrc="../js/Vue.js"charset="utf-8"></script> <scripttype="text/javascript"> window.onload=function(){ varvm=newVue({ el:'.box', data:{ msg:'welcomevue', msg2:12, msg3:true, arr:['app','orange','pare'] } }); } </script> </head> <body> <divclass="box"> <inputtype="text"v-model='msg'/> <br/> <inputtype="text"v-model='msg'/> <br/> {{msg}} <br/> {{msg2}} <br/> {{msg3}} <br/> {{arr}} </div> </body> </html></pre> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。</p></section> </div> </div>  <nav> <span class="meta-nav"><a href="/article/242911.html" title="Servlet 与 Ajax 交互一直报status=parsererror的解决办法" se_prerender_url="complete">上一篇<br>Servlet 与 Ajax 交互一直报status=parsererror的解决办法</a></span> <span class="meta-nav"><a href="/article/242907.html" title="Eclipse智能提示及快捷键" se_prerender_url="complete">下一篇<br>Eclipse智能提示及快捷键</a></span> <div class="clear"></div> </nav>  <div class="article-recommend"> <h3>热门推荐</h3> <div class="title"><span class="s-1">1</span> <a href="/article/10835.html" title="毛坯房验收经验和常识看了之后再验房心里有底">毛坯房验收经验和常识看了之后再验房心里有底</a></div> <div class="title"><span class="s-2">2</span> <a href="/article/10697.html" title="二手房收房如何交接二手房收房注意问题">二手房收房如何交接二手房收房注意问题</a></div> <div class="title"><span class="s-3">3</span> <a href="/article/10605.html" title="专业验收毛坯房的价格商品房验收合格的标准">专业验收毛坯房的价格商品房验收合格的标准</a></div> <div class="title"><span class="s-4">4</span> <a href="/article/10568.html" title="精装房怎么验收精装房请验房师有用吗">精装房怎么验收精装房请验房师有用吗</a></div> <div class="title"><span class="s-5">5</span> <a href="/article/10567.html" title="一般要到哪里找验房师验房师有哪些作用呢">一般要到哪里找验房师验房师有哪些作用呢</a></div> <div class="title"><span class="s-6">6</span> <a href="/article/10566.html" title="请人验房一般是多少钱验房师费用是多少">请人验房一般是多少钱验房师费用是多少</a></div> <div class="title"><span class="s-7">7</span> <a href="/article/10553.html" title="怎样测量房子面积建筑面积和使用面积怎么算">怎样测量房子面积建筑面积和使用面积怎么算</a></div> <div class="title"><span class="s-8">8</span> <a href="/article/10550.html" title="收房需要注意什么仔细检查不松懈">收房需要注意什么仔细检查不松懈</a></div> <div class="title"><span class="s-9">9</span> <a href="/article/10548.html" title="收房时三书一证一表是什么主要作用介绍">收房时三书一证一表是什么主要作用介绍</a></div> <div class="title"><span class="s-10">10</span> <a href="/article/10547.html" title="交房时交房税费有哪些本文为你一一讲解">交房时交房税费有哪些本文为你一一讲解</a></div> <div class="title"><span class="s-11">11</span> <a href="/article/10526.html" title="验房都需要验什么要做哪些准备呢">验房都需要验什么要做哪些准备呢</a></div> <div class="title"><span class="s-12">12</span> <a href="/article/10525.html" title="毛坯房验房师有必要请吗毛坯房装修完如何验收">毛坯房验房师有必要请吗毛坯房装修完如何验收</a></div> <div class="title"><span class="s-13">13</span> <a href="/article/7820.html" title="地下室防水工程质量验收规范详解">地下室防水工程质量验收规范详解</a></div> <div class="title"><span class="s-14">14</span> <a href="/article/4947.html" title="水性涂料、油性涂料区别介绍">水性涂料、油性涂料区别介绍</a></div> <div class="title"><span class="s-15">15</span> <a href="/article/4517.html" title="零基础布艺DIY工坊教你做超萌猫头鹰钥匙包">零基础布艺DIY工坊教你做超萌猫头鹰钥匙包</a></div> <div class="title"><span class="s-16">16</span> <a href="/article/4438.html" title="三棵树漆怎么样？三棵树漆官方网站">三棵树漆怎么样？三棵树漆官方网站</a></div> <div class="title"><span class="s-17">17</span> <a href="/article/4258.html" title="家庭“装修套餐”中猫腻你知道吗？">家庭“装修套餐”中猫腻你知道吗？</a></div> <div class="title"><span class="s-18">18</span> <a href="/article/4051.html" title="小空间大浴望卫浴间装修巧支招">小空间大浴望卫浴间装修巧支招</a></div> </div> <div class="add-gg">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4387516810452807" data-ad-slot="9131157744" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>  <div id="sidebar"> <li class="sidebar-box"> <h3 class="widget-title">随机推荐</h3> <ul> <li> <a href="/article/365290.html" title="祝长辈中秋祝福语简短">祝长辈中秋祝福语简短</a> </li> <li> <a href="/article/365289.html" title="老板离职了简短祝福语">老板离职了简短祝福语</a> </li> <li> <a href="/article/365287.html" title="酸奶店开业祝福语简短">酸奶店开业祝福语简短</a> </li> <li> <a href="/article/365286.html" title="天冷祝福语简短暖心">天冷祝福语简短暖心</a> </li> <li> <a href="/article/365285.html" title="蛋糕祝福语简短给老公">蛋糕祝福语简短给老公</a> </li> <li> <a href="/article/365284.html" title="初中老师结婚祝福语简短">初中老师结婚祝福语简短</a> </li> <li> <a href="/article/365283.html" title="历史老师结婚祝福语简短">历史老师结婚祝福语简短</a> </li> <li> <a href="/article/365282.html" title="不同的生日祝福语简短">不同的生日祝福语简短</a> </li> <li> <a href="/article/365281.html" title="医师节晚宴祝福语简短">医师节晚宴祝福语简短</a> </li> <li> <a href="/article/365279.html" title="祝别人99祝福语简短">祝别人99祝福语简短</a> </li> <li> <a href="/article/365277.html" title="装修开工祝福语简短霸气">装修开工祝福语简短霸气</a> </li> <li> <a href="/article/365275.html" title="过年祝福语简短走心">过年祝福语简短走心</a> </li> <li> <a href="/article/365272.html" title="去读大学祝福语简短">去读大学祝福语简短</a> </li> <li> <a href="/article/365271.html" title="砸墙祝福语简短霸气">砸墙祝福语简短霸气</a> </li> <li> <a href="/article/365270.html" title="生日恩爱祝福语简短精辟">生日恩爱祝福语简短精辟</a> </li> <li> <a href="/article/365266.html" title="好的结婚祝福语简短">好的结婚祝福语简短</a> </li> </ul> </li> <li class="sidebar-box">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4387516810452807" data-ad-slot="8604338277" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </li> </div> </div> </div> <ul class="suspend"> <li class="back-top" onclick="backTop()"> <i class="fa fa-chevron-up"></i> <span class="more">返回顶部</span> </li> <li> <a href="http://wpa.qq.com/msgrd?v=3&uin=3162201930&site=qq&menu=yes"> <i class="fa fa-qq"></i> <span class="more">3162201930</span> </a> </li> <li> <a href="mailto:czq8825@qq.com"> <i class="fa fa-envelope"></i> <span class="more">czq8825@qq.com</span> </a> </li>  </ul> <footer class="footer clearfix"> <p>免责声明：网站资源来源于网络，如有侵权，请及时联系删除。</p> <p>Copyright © 2024 <a href="/">微客导航网</a>. All Rights Reserved.</p> <p> <a href="https://beian.miit.gov.cn">蜀ICP备2021004611号-4</a> <a href="/sitemap.html">网站地图</a> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?78e2f1027b3a17750580941ea594d61e"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </p> </footer> <script src="/Public/Home/js/main.js"></script> <script type="text/javascript" src="/Public/Home/js/z_stat.js"></script> </body> </html>