Vue常用指令V-model用法
更新时间:2017年03月08日 16:55:57 作者:阁下长的好生俊俏
本篇文章主要介绍了Vue常用指令_V-model用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据。
<!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>
<!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>
<!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>
<!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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
element-ui中el-form-item内的el-select该如何自适应宽度
自从用了element-ui,确实好用,该有的组件都有,但是组件间的样式都固定好了,下面这篇文章主要给大家介绍了关于element-ui中el-form-item内的el-select该如何自适应宽度的相关资料,需要的朋友可以参考下2022-11-11vue 关闭浏览器窗口的时候,清空localStorage的数据示例
今天小编就为大家分享一篇vue 关闭浏览器窗口的时候,清空localStorage的数据示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11解决Vue中使用Echarts出现There is a chart instance already ini
使用echarts的时候,多次加载会出现There is a chart instance already initialized on the dom.这个黄色警告,此警告信息不影响echarts正常加载,但是有bug得解决,本文就带大家解决这个问题,感兴趣的同学可以参考阅读2023-06-06
最新评论