v-model指令表单应用及组件封装

<template> <div class="container"> <!-- 输入框 --> <div class="content"> <h1>输入框正常赋值</h1> <h2>名称：</h2> <!-- <input type="text" v-model="formData.name" /> --> <input type="text" :value="formData.name" @input="formData.name = $event.target.value"/> <h2>数据：</h2> <div>{{ formData.name }}</div> </div> <hr/> <div class="content"> <h1>输入框延迟赋值</h1> <h2>账号：</h2> <!-- <input type="text" v-model.lazy="formData.account" /> --> <input type="text" :value="formData.account" @change="formData.account = $event.target.value"/> <h2>数据：</h2> <div>{{ formData.account }}</div> </div> <hr/> <div class="content"> <h1>单选框</h1> <h2>性别：</h2> <input type="radio" v-model="formData.gender" value="male"> 男 <input type="radio" v-model="formData.gender" value="female"> 女 <input type="radio" v-model="formData.gender" value="other"> 其他 <h2>数据：</h2> <div>{{ formData.gender }}</div> </div> <hr/> <div class="content"> <h1>复选框-群组</h1> <h2>爱好：</h2> <input type="checkbox" value="sing" v-model="formData.hobby"> 唱歌 <input type="checkbox" value="dance" v-model="formData.hobby"> 跳舞 <input type="checkbox" value="rap" v-model="formData.hobby"> Rap <input type="checkbox" value="basketball" v-model="formData.hobby"> 篮球 <h2>数据：</h2> <div>{{ formData.hobby }}</div> </div> <hr/> <div class="content"> <h1>复选框-单一</h1> <h2>消息通知：</h2> <input type="checkbox" v-model="formData.notice"> 同意消息通知 <h2>数据：</h2> <div>{{ formData.notice }}</div> </div> <hr/> <div class="content"> <h1>选择器</h1> <h2>有效证件类型：</h2> <select v-model="formData.card"> <option value="">请选择</option> <option value="idCard">身份证</option> <option value="driveCard">驾照</option> </select> <h2>数据：</h2> <div>{{ formData.card }}</div> </div> <hr/> <div class="content"> <h1>封装组件</h1> <CheckBox v-model="formData.comp"> 是否同意组件化</CheckBox> <h2>数据：</h2> <div>{{ formData.comp }}</div> </div> </div> </template> <script> import CheckBox from './CheckBox.vue' export default { components: { CheckBox }, data () { return { formData: { name: '', account: '', gender: 'female', hobby: [], notice: false, card: '', bag: ['egg'], comp: true } } } } </script> <style lang="less" scoped> .container{ width: 1200px; margin: 120px auto; input{ border: 1px #333 solid; } h2{ margin: 8px 0; } hr{ margin: 18px 0; } } </style>