5.v-model双向数据绑定

code_dream_wq

于 2020-11-25 17:47:36 发布

阅读量118

点赞数

分类专栏： # vue学习

本文链接：https://blog.csdn.net/code_dream_wq/article/details/110138064

版权

vue学习专栏收录该内容

40 篇文章

订阅专栏

博客介绍了双向数据绑定，即数据变化时视图改变，视图变化时数据同步改变。还提到了v-model指令，它是一个限制在<input>、<select>、<textarea>、components中使用的指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

双向数据绑定

- 当数据发生变化的时候，视图也就发生变化
- 当视图发生变化的时候，数据也会跟着同步变化

v-model

- **v-model**是一个指令，限制在 `<input>、<select>、<textarea>、components`中使用


  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>{{msg}}</div>
      <div>
        <input type="text" v-model='msg'>
      </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      /*
        双向数据绑定
        1、从页面到数据
        2、从数据到页面
      */
      var vm = new Vue({
        el: '#app',
        data: {
          msg: 'Hello Vue'
        }
      });
    </script>
  </body>
  </html>