Vue12 -- 表单的数据收集 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <form action="" method="post" @submit.prevent="sub">
                <input type="text" name="" v-model="user" />
                <input type="password" name="" v-model="pwd" />
                <br />
                性别：
                <input type="radio" name="sex" value="男" v-model="sex">男
                <input type="radio" name="sex" value="女" v-model="sex">女
                <br />
                爱好：
                <input name="Fruit" type="checkbox" value="足球" v-model="hobby"/>足球
                <input name="Fruit" type="checkbox" value="篮球" v-model="hobby"/>篮球
                <input name="Fruit" type="checkbox" value="乒乓球" v-model="hobby" />乒乓球
                <br />
                城市：
                <select name="carlist" form="carform" v-model="cityid">
                    <option value="">请选择</option>
                   <option :value="index" v-for="(city,index) in citys">{{city.city}}</option>
                   
                </select> 
                <br />
                描述：
                <textarea name="" rows="" cols="" v-model="ms"></textarea>
                <br />
                <input type="submit" value="提交" />
            </form>
        </div>
        
        <script src="https://vuejs.org/js/vue.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                    user:'',
                    pwd:'',
                    sex:'女',
                    hobby:[],
                    cityid:'',
                    citys:[
                        {id:1,city:'CQ'},
                        {id:2,city:'BJ'},
                        {id:3,city:'SH'},
                    ],
                    ms:''
                },
                methods:{
                    sub(){
                        console.log(this.user,this.pwd)
                    }
                }
            })
        </script>
    </body>
</html>

 

posted @ 2019-07-20 09:15  我在地球凑人数的日子  阅读(474)  评论(0)    收藏  举报