Vue Common Instructions V model Usage

2021-08-03 08:25:12
OfStack

The v-model directive can only be used in < input > , < select > , < textarea > On these form elements, the so-called bidirectional binding means that the contents of data in vue instance in js and its rendered dom element remain the same, and no matter who is changed, the other party will be updated to the same data accordingly.


<!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>