當元素為text的時候：

<input type="text" v-model="text">
        <p>{{text}}</p><hr>

    data:{
        text:‘‘,
    }

當元素為checkbox的時候（單個的時候）選擇的話為true，否則為false

<input type="checkbox" name="checkbox1" v-model="checked">
        <p>{{checked}}</p><hr>
    data:{
        checked:‘‘,
    }
 

當CheckBox為多個的時候，這時候需要在元素上加上value屬性並賦值，選中的話，會獲取value的值

<div>
            <input type="checkbox" value="value1" v-model="ch">
            <input type="checkbox" value="value2" v-model="ch">
            <input type="checkbox" value="value3" v-model="ch">
            <input type="checkbox" value="value4" v-model="ch">
        </div>
        <p>{{ch}}</p><hr>

    data:{

        ch:[],
    }
 

當元素為radio的時候

        <input type="radio" v-model="radio1" value="0">
        <input type="radio" v-model="radio1" value="1">
        <p>{{radio1}}</p>

    data:{
        radio1:‘‘
    }

select元素(單選)，註意，如果option的元素沒有value屬性的值的話，獲取的結果以option元素的文本內容
如果有value的值的時候，獲取的時候獲取value的值

<select v-model="select1">
            <option value="a">ab</option>
            <option value="b">bc</option>
            <option value="c">cc</option>
        </select>
        <p>{{select1}}</p>
    data:{
        select1:‘‘
    }

select元素多選的時候，記得也是要加value屬性的
還要記得在select元素加上multiple

<select v-model="select2" multiple>
            <option value="english">en</option>
            <option value="chinese">cn</option>
            <option value="japanese">jp</option>
        </select>
        <p>{{select2}}</p>

    data:{
        select2:[]
    }

我們可以獲取表單元素裏面的值

<button v-on:click="gain">click</button>
    methods:{
        gain:function(){
            console.log(123);
            console.log(this.text,this.checked,this.ch,this.radio1,this.select1,this.select2)
        }
    }

vue-隨筆-form-elements