VUE表單數(shù)據(jù)的自動(dòng)收集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="demo">
        <form action="" @submit.prevent="handleSubmit">
            <span>用戶名</span>
            <input type="text" v-model="username"><br>
            <span>密碼</span>
            <input type="password" v-model="pwd"><br>
            <span>性別</span>
            <input type="radio" id="female" value="女" v-model="sex">
            <label for="female">女</label>
            <input type="radio" id="male" value="男" v-model="sex">
            <label for="male">男</label><br>
            <span>愛(ài)好</span>
            <input type="checkbox" id="basket" value="basket" v-model="likes">
            <label for="basket">籃球</label>
            <input type="checkbox" id="football" value="football" v-model="likes">
            <label for="football">足球</label>
            <input type="checkbox" id="wangqiu" value="wangqiu" v-model="likes">
            <label for="wangqiu">網(wǎng)球</label><br>
            <span>選擇城市</span>
            <select v-model="cityId">
                <option value="">未選擇</option>
                <option :value="city.id" v-for="(city,index) in allCitys" :key="index">{{city.name}}</option>
            </select>
            <input type="submit">
        </form>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:'#demo',
        data:{
            username:'',
            pwd:'',
            sex:'女',
            likes:['football'],
            allCitys:[{id: 1,name:'beijing'},{id: 2,name:'tangshan'},{id: 3,name:'xixixi'}],
            cityId:'3'
        },
        methods:{
            handleSubmit(){
                console.log(this.username,this.pwd);
            }
        }
    })
</script>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容