5.v-model双向数据绑定

最新推荐文章于 2024-04-03 16:05:44 发布

code_dream_wq

最新推荐文章于 2024-04-03 16:05:44 发布

阅读量82

点赞数

分类专栏： # vue学习

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

版权

vue学习专栏收录该内容

40 篇文章 1 订阅

订阅专栏

双向数据绑定

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

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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

code_dream_wq

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.v-model双向数据绑定

双向数据绑定- 当数据发生变化的时候，视图也就发生变化- 当视图发生变化的时候，数据也会跟着同步变化v-model- **v-model**是一个指令，限制在 `<input>、<select>、<textarea>、components`中使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> .
复制链接

扫一扫