首页 > 其他 > 详细

vue的v-model双向数据绑定

时间:2019-11-04 11:46:13      阅读:85      评论:0      收藏:0      [点我收藏+]

一、解释

v-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定

 

二、实例

<body>
  <div id="app">
    <h4>{{ msg }}</h4>

    <!-- v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定  -->
    <!-- <input type="text" v-bind:value="msg" style="width:100%;"> -->

    <!-- 使用  v-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定 -->
    <!-- 注意: v-model 只能运用在 表单元素中 -->
    <!-- input(radio, text, address, email....)   select    checkbox   textarea   -->
    <input type="text" style="width:100%;" v-model="msg">
  </div>

  <script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: #app,
      data: {
        msg: 大家都是好学生,爱敲代码,爱学习,爱思考,简直是完美,没瑕疵!
      },
      methods: {
      }
    });
  </script>
</body>

 

vue的v-model双向数据绑定

原文:https://www.cnblogs.com/wangyuxue/p/11791193.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!