vue实战学习教程3-表单输入绑定

最新推荐文章于 2025-04-15 11:19:37 发布

月小满

最新推荐文章于 2025-04-15 11:19:37 发布

阅读量197

点赞数

分类专栏： vue实战文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44110923/article/details/112979166

版权

vue实战专栏收录该内容

10 篇文章

订阅专栏

给后台传值不用一个个绑定input元素传送，可以一次性搞定

<head>
    <title>form 表单输入与传值</title>
</head>
<body>
    <div id="myvue">
        <!--阻止表单传播事件（用@submit.prevent）去执行mysubmit函数-->
        <form action="1.html" @submit.prevent="mysubmit">
            用户名：<input type="text" value="" v-model="user.username"><br>
            密码：<input type="password" value="" v-model="user.password"><br>
            性别：<input type="radio" value="male" v-model="user.sex">男
                <input type="radio" value="female" v-model="user.sex">女<br>
            兴趣：<input type="checkbox" value="football" v-model="user.hobbies">足球，
                <input type="checkbox" value="basketball" v-model="user.hobbies">篮球，
                <input type="checkbox" value="pingpang" v-model="user.hobbies">乒乓球，<Br>
            城市：
                <select name="" id="" v-model="user.city">
                    <option disabled value="">请选择</option>
                    <option v-for="c in optionalCities" :value="c.id">{{c.name}}</option>
                </select>
                <Br><Br>
            <input type="submit" value="注册">
        </form>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm=new  Vue({
            el:'#myvue',
            data:{
                user:{
                    username:'',
                    password:'',
                    sex:'',
                    hobbies:[],
                    city:''//选定城市的结果
                },
                //可选城市的下拉选项
                optionalCities:[{id:1,name:'xa'},{id:2,name:'bj'},{id:3,name:'jn'}]
            },
            methods:{
                mysubmit(){
                    console.log(JSON.stringify(this.user)) //打印传输的数据,转换为json数据用JSON.stringifiy（）
                }
            }
        })
    </script>
</body>