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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章