Vue中的表单输入绑定,双向绑定方式

姓名：
<input type="text" v-model="student.name">

简介：
<textarea v-model="student.summary"></textarea>

所属省份：
<template v-for="item in areas">
    <div>
    <label > <input type="radio" name="area" :value="item" v-model="student.province">{{item}}</label>
    </div>
</template>

<script>
export default {
    data() {
        return {
            student: {
                name: '张三',
                score: 100.5,
                password: ' 1234 '
            },
            age: 10.8,
            areas: ['济南', '聊城', '北京']
        }
    }
}
</script>

多选省份：
<template v-for="item in areas">
    <div>
        <label> <input type="checkbox" name="checkvalue" :value="item" v-model="student.checkvalue">{{ item }}</label>
    </div>
</template>

export default {
    data() {
        return {
            student: {
                checkvalue:[]//多选框需要对应数组
            }
        }
    }
}

下拉选择：
<select v-model="student.sel">
    <option :value="item" v-for="item in areas">{{ item }}</option>
</select>

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

<input type="number" v-model.number="student.score">

<input v-model.number="student.password">