vue.js中的v-model

vue.js中的v-model

  <html>
  <head></head>
  <body>
  <div id="app">
    <!-- msg为展示的值,从其id所对应的data中取值 -->
    <p>{{msg}}</p><br>
    <!-- 此处为输入框,用v-model绑定msg,输入框中输入的值决定msg的值-->
    输入:<input type="text"  v-model='msg'>
  </div>
  </body>
  <script src='https://unpkg.com/vue/dist/vue.js'></script>
  <script >
    new Vue({
      el:'#app',
      data:{
          msg:"hi"
      }
    })
  </script>
  </html>

解释:

  <input type="text"  v-model='msg'>

v-model这个指令只能用在<input> , <select> , <textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容