快捷導(dǎo)航

Vue?收集表單數(shù)據(jù)方法詳情

更新時(shí)間：2022年05月27日 11:40:46 作者：??奔跑吧雞翅????

這篇文章主要介紹了Vue?收集表單數(shù)據(jù)方法詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

表單收集數(shù)據(jù)代碼實(shí)現(xiàn)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初識(shí)</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
    <form @submit.prevent="demo">
        <label for="demo">賬號(hào)：</label>
        <!--.trim 做為數(shù)字來收集-->
        <input type="text" id="demo" v-model.trim="account"><br/><br/>
        密碼：<input type="password" v-model="password"><br/><br/>
        <!--.number 做為數(shù)字來收集-->
        年齡：<input type="number" v-model.number="age"><br/><br/>
        性別：男<input type="radio" name="sex" v-model="sex" value="male">女<input type="radio" name="sex" v-model="sex" value="female"><br/><br/>
        愛好：
        吃飯<input type="checkbox" v-model="hobby" value="eat">
        睡覺<input type="checkbox" v-model="hobby" value="sleep">
        打游戲<input type="checkbox" v-model="hobby" value="game"><br/><br/>
        所屬地區(qū)：
        <select v-model="city">
            <option value="">請(qǐng)選擇地區(qū)</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">廣州</option>
        </select><br/><br/>
        其他信息：
        <!--.lazy 在失去焦點(diǎn)時(shí)再收集信息-->
        <textarea v-model.lazy="other"></textarea><br/><br/>
        <input type="checkbox" v-model="agree">閱讀并接受<a  rel="external nofollow" >《用戶協(xié)議》</a><br/><br/>
        <button>提交</button>
    </form>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    //創(chuàng)建vue實(shí)例
    new Vue({
        el: "#root",
        data: {
            account:"",
            password:"",
            age:18,
            sex:"male",
            hobby:[],
            city:"",
            other:"",
            agree:""
        }
    })
</script>
</body>
</html>