Vue的学习之路五:v-model

<body>
    <div id="app">
      <h4>{{msg}}</h4>
      <!-- v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V,无法实现数据的双向绑定 -->
      <input type="text" :value="msg">
      <!-- 使用 v-model 指令,可以实现表单元素和Model中数据的双向数据绑定 -->
      <!-- 注意:v-model 只能运用在表单元素中 input(radio, text, address, email...) select checkbox textarea -->
      <input type="text" v-model="msg">
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          msg: '大家都是好学生',
        },
        methods: {},
      })
    </script>
  </body>

介绍Vue的双向数据绑定指令v-model

  1. v-bind:只能实现数据的单向绑定,从 M 自动绑定到 V,无法实现数据的双向绑定
  2. v-model:可以实现表单元素和Model中数据的双向数据绑定
  3. v-model注意事项:只能运用在表单元素中input(radio, text, address, email...) select checkbox textarea
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章