Vue(三)--v-model雙向綁定

一、表單綁定

1.1、v-model基本使用

Vue中使用v-model指令來實現表單元素和數據的雙向綁定

解析：當我們在輸入框輸入內容時，因為input中的v-model綁定了message，所以會實時將輸入的內容傳遞給message，message發生改變。當message發生改變時，因為上面我們使用Mustache語法，將message的值插入到DOM中，所以DOM會發生響應的改變。所以，通過v-model實現了雙向的綁定

也可以將v-model用於textarea元素：

1.2、v-model原理

v-model其實是一個語法糖，它的背后本質上是包含兩個操作：

• 1.v-bind綁定一個value屬性
• 2.v-on指令給當前元素綁定input事件

也就是說下面的代碼：等同於下面的代碼：

<input type="text" v-model="message">
等同於
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

示例：

<div id="app">
  <!--<input type="text" v-model="message">-->
  <!--<input type="text" :value="message" @input="valueChange">-->
  <input type="text" :value="message" @input="message = $event.target.value">
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      valueChange(event) {
        this.message = event.target.value;
      }
    }
  })
</script>

1.3、v-model結合radio類型

1.4、v-model結合checkbox類型

<div id="app">
  <!--1.checkbox單選框-->
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意協議
  </label>
  <h2>您選擇的是: {{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>
  <br><br>

  <!--2.checkbox多選框-->
  <input type="checkbox" value="籃球" v-model="hobbies">籃球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>您的愛好是: {{hobbies}}</h2>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isAgree: false, // 單選框
      hobbies: [], // 多選框,
    }
  })
</script>

1.5、v-model結合select類型

<div id="app">
  <!--1.選擇一個-->
  <select name="abc" v-model="fruit">
    <option value="蘋果">蘋果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴蓮">榴蓮</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您選擇的水果是: {{fruit}}</h2>

  <!--2.選擇多個-->
  <select name="abc" v-model="fruits" multiple>
    <option value="蘋果">蘋果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴蓮">榴蓮</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您選擇的水果是: {{fruits}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      fruit: '香蕉',
      fruits: []
    }
  })
</script>

1.6、v-mode修飾符使用

lazy修飾符：

• 默認情況下，v-model默認是在input事件中同步輸入框的數據的。
• 也就是說，一旦有數據發生改變對應的data中的數據就會自動發生改變。
• lazy修飾符可以讓數據在失去焦點或者回車時才會更新：

number修飾符：

• 默認情況下，在輸入框中無論我們輸入的是字母還是數字，都會被當做字符串類型進行處理。
• 但是如果我們希望處理的是數字類型，那么最好直接將內容當做數字處理。
• number修飾符可以讓在輸入框中輸入的內容自動轉成數字類型：

trim修飾符：

• 如果輸入的內容首尾有很多空格，通常我們希望將其去除
• trim修飾符可以過濾內容左右兩邊的空格

<div id="app">
  <!--1.修飾符: lazy-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>


  <!--2.修飾符: number-->
  <input type="number" v-model.number="age">
  <h2>{{age}}-{{typeof age}}</h2>

  <!--3.修飾符: trim-->
  <input type="text" v-model.trim="name">
  <h2>您輸入的名字:{{name}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      age: 0,
      name: ''
    }
  })
</script>