_004_Vue_表单数据的收集

使用 v-model 对表单数据自动收集

1) text/textarea
2) checkbox
3) radio
4) select
<body>
<div id="component">
    <form action="/xxx" @submit.prevent="handleSubmit">
        <span>用户名：</span>
        <input type="text" v-model="username">
        <br><br>
        <span>密码：</span>
        <input type="password" v-model="password">
        <br><br>
        <span>性别：</span>
        <label>男</label><input type="radio" value="male" v-model="sex">
        <label>女</label><input type="radio" value="female" v-model="sex">
        <br><br>
        <span>爱好：</span>
        <label for="basketball">篮球</label><input type="checkbox" id="basketball" value="basketball" v-model="hobbies">
        <label for="football">足球</label><input type="checkbox" id="football" value="football"  v-model="hobbies">
        <label for="pingpong">乒乓球</label><input type="checkbox" id="pingpong" value="pingpong"  v-model="hobbies">
        <br><br>
        <span>城市：</span>
        <select v-model="selectedCityId">
            <option>未选择</option>
            <option :value="item.cityId" v-for="(item,index) in cities" :key="item.cityId">{{item.cityName}}</option>
        </select>
        <br><br>
        <span>描述：</span>
        <textarea rows="10" v-model="description"></textarea><br><br>
        <input type="submit" value="注册">
    </form>
</div>

<script type="text/javascript" src="../../lib_001_vue/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#component',
        data: {
            username:'',
            password:'',
            sex:'male',
            hobbies:[],
            cities:[{cityId:0,cityName:'北京'},{cityId:1,cityName:'上海'},{cityId:2,cityName:'广州'},{cityId:3,cityName:'深圳'}],
            selectedCityId:1,
            description : '',
        },
        methods: {
            handleSubmit(){
                console.log(this.username+'--'+this.password+'--'+this.sex+'--'+this.hobbies+'--'+this.selectedCityId+'--'+this.description);
            }
        }
    });
</script>
</body>
_004_Vue_表单数据的收集

使用 v-model 对表单数据自动收集

猜你喜欢
