Vue常用指令V-model用法

2019-11-19 17:14:19

字体：大中小

来源：转载

供稿：网友

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：微信小程序中用WebStorm使用LESS

下一篇：详解使用vue-router进行页面切换时滚动条位置与滚动监听事件