用Vue进行表单绑定

最新推荐文章于 2023-04-29 15:49:56 发布

海马体加强中

最新推荐文章于 2023-04-29 15:49:56 发布

阅读量118

点赞数

分类专栏： Vue制作表单文章标签： vue

本文链接：https://blog.csdn.net/qq_38722696/article/details/111567800

版权

Vue制作表单专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       姓名：<input v-model.trim.lazy='username'><br>
       年龄：<input type="number" v-model.number.lazy='age'><br>
       简介：<textarea cols="30" rows="3" v-model.lazy='desc' ></textarea><br>
       邮箱：<input type="email" v-model.lazy='email' ><br>
       幸运色：<input type="color" v-model='lucky'><br>
       性别：<span v-for='item in sexArr'>
                <input type="radio" :value="item.text" v-model='sex'>
                <span v-text='item.text'></span>
            </span>
            <br>
        爱好：
            <span v-for='item in likeArr'>
                <input type="checkbox" :value="item.label" v-model='like'>
                <span v-text='item.label'></span> 
            </span>
             <!-- <input type="checkbox" value="2" v-model='like'>
             <span>干饭</span>
             <input type="checkbox" value="3" v-model='like'>
             <span>睡觉</span>
             <input type="checkbox" value="4" v-model='like'>
             <span>玩游戏</span>
             <input type="checkbox" value="5" v-model='like'>
             <span>唱歌</span> -->
             <br>
        学历：<select v-model='grade' >
            <option 
            v-for='item in gradeArr' 
            :value='item.value'   
            v-text='item.value'
            ></option>
            <!-- <option >硕士</option>
            <option >本科</option>
            <option >大专</option>
            <option >高中</option>
            <option >初中</option> -->
        </select><br>
        朋友：<select multiple v-model='friend'>
            <option 
            v-for='item in friendArr'
            :value='item.name'
            v-text='item.name'
            ></option>
            <!-- <option >李四</option>
            <option >王五</option>
            <option >赵六</option>
            <option >张七</option>
             <option >刘八</option>
            <option >钱九</option>
            <option >洪十</option> -->
            

        </select> <br> 
       
       <button @click='submit' required>提交表单</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
               username:'', 
               age:'',
               desc:'',
               email:'',
               lucky:'#ffffff',
               sexArr:[
                {id:'男',text:'男'},
                {id:'女',text:'女'}
               ],
               sex:'男',
               likeArr:[
                   {id:1,label:'跑步'},
                   {id:2,label:'干饭'},
                   {id:3,label:'睡觉'},
                   {id:4,label:'玩游戏'},
                   {id:5,label:'唱歌'},
               ],
               like:[],
               gradeArr:[
                   {id:1,value:'博士'},
                   {id:2,value:'硕士'},
                   {id:3,value:'本科'},
                   {id:4,value:'大专'},
                   {id:5,value:'高中'},
                   {id:6,value:'初中'},
               ],
               grade:[],
               friendArr:[
                   {id:1,name:'张三'},
                   {id:2,name:'李四'},
                   {id:3,name:'王五'},
                   {id:4,name:'赵六'},
                   {id:5,name:'张七'},
                   {id:6,name:'刘八'},
                   {id:7,name:'钱九'},
                   {id:7,name:'洪十'},
            ],
               friend:[],
            },
            methods: {
                submit(){
                    console.log('提交',{
                        username:this.username,
                        age:this.age,
                        desc:this.desc,
                        email:this.email,
                        lucky:this.lucky,
                        sex:this.sex,
                        like:this.like,
                        grade:this.grade,
                        friend:this.friend,
                    })
                }
            }
        })
    </script>
</body>
</html>

海马体加强中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Vue进行表单绑定

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="app">
复制链接

扫一扫