vue之表單輸入綁定

一、v-model指令　　

　　用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。數據的雙向綁定可以理解為：數據的單向綁定+UI事件監聽，單向綁定是將model綁定到view，當model更新時，view也會更新；雙向綁定就是model和view互相驅動。

這里可以先看v-model表單綁定的實例：

<div id="app">
    <label>
        <input type="text" v-model="info">
    </label>
    <p>{{info}}</p>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            info:'hello world!',
        }
    })

</script>

效果如下所示：

那么v-model實現原理是怎樣呢？

<div id="app">
    <label>
        <input type="text" :value=`${info}` @input="infoChange">
    </label>
    <p>{{info}}</p>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            info:'hello world!',
        },
        methods:{
            infoChange:function (e) {
                this.getValue=e.target.value //獲取輸入的值，並且將它賦值給計算屬性中的getValue
            }
        },
        computed:{

            getValue:{
                set:function (newValue) {
                    this.info=newValue  //將input框中的值賦給data中的info
                },

                get:function () {
                    return this.info //這里也可以不用返回值，除非模板中獲取getValue值，會調用它
                }
            }

        }


    })

</script>

二、基礎用法

v-model 在內部為不同的輸入元素使用不同的屬性並拋出不同的事件：

• text 和 textarea 元素使用 value 屬性和 input 事件；
• checkbox 和 radio 使用 checked 屬性和 change 事件；
• select 字段將 value 作為 prop 並將 change 作為事件。

1、多行文本

<div id="app">
        <!--多行文本-->
    <textarea v-model="info" placeholder="add multiple lines"></textarea>
    <p style="white-space: pre-line;">{{ info }}</p>
</div>

    var vm = new Vue({
        el:'#app',
        data:{
            info:'',
        },

    })

輸出：

2、復選框

<div id="app">
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            info:'',
            checked:false
        },

    })

</script>

輸出：

多個復選框，綁定到同一個數組：

var vm = new Vue({
  el: '#app',
  data: {
    checkedNames: []
  }
})

3、單選按鈕

<div id="app">
        <input type="radio" id="male" value="male" v-model="picked">
        <label for="male">One</label>
        <br>
        <input type="radio" id="female" value="female" v-model="picked">
        <label for="female">Two</label>
        <br>
        <span>Picked: {{ picked }}</span>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            picked:''
        },
    })

</script>

輸出：

4、選擇框

<div id="app">
    <label>
        <select v-model="selected">
            <option disabled value="">請選擇</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
    </label>
    <span>Selected: {{ selected }}</span>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            selected:''
        },
    })

</script>

輸出：

多選時綁定到一個數組：

var vm = new Vue({
        el:'#app',
        data:{
            selected:[]
        },
})

然后使用v-for動態渲染。

5、值綁定

對於單選按鈕，復選框及選擇框的選項，v-model 綁定的值通常是靜態字符串，但有時需要將值綁定到 Vue 實例的一個動態屬性上，這時可以用 v-bind 實現。

<!--值綁定-->
    <label>
        <input type="radio" v-model="picked" v-bind:value="a">
    </label>
    <span>Picked: {{ picked }}</span>

    var vm = new Vue({
        el:'#app',
        data:{
            a:456
        },
}）

// 當選中時
vm.pick === vm.a

6、修飾符

• .lazy

在默認情況下，v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步 ，可以添加 lazy 修飾符，從而轉變為使用 change 事件進行同步。

     <label>
        <input type="text" v-model.lazy="info">
     </label>

        <p>{{info}}</p>    

輸出：

• .number

自動將用戶的輸入值轉為數值類型，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字符串。

    <label>
        <input type="number" v-model.number="info">
    </label>
    
    <p>{{info}}</p>

輸出：

• .trim

自動過濾用戶輸入的首尾空白字符

    <label>
        <input type="text" v-model.trim="info">
    </label>

    <p>{{info}}</p>

輸出：

 更多請參考：https://cn.vuejs.org/v2/guide/forms.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-model