VUE框架画出一组表单form实现数据收集并以json的形式回传------VUE框架

旧约Alatus

已于 2023-11-30 21:46:00 修改

阅读量975

点赞数 27

分类专栏： # VUE框架前端文章标签： vue.js 前端 javascript vue js 前端框架 ecmascript

于 2023-11-30 14:46:04 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134712304

版权

前端同时被 2 个专栏收录

329 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        
        <form action="javascript:void(0)" @submit="send()">
            
            用户名<input type="text" v-model.trim="user.username"/><br><br>
            密码<input type="password" v-model="user.password"/><br><br>
            
            年龄<input type="number" v-model.number="user.age"/><br><br>
            性别:
            男<input type="radio" name="gender" value="men" v-model="user.gender"/>
            女<input type="radio" name="gender" value="women" v-model="user.gender"/>
            <br><br>
            爱好
            
            旅游<input type="checkbox" value="trip" v-model="user.hobbies"/>
            运动<input type="checkbox" value="sprots" v-model="user.hobbies"/>
            唱歌<input type="checkbox" value="sing" v-model="user.hobbies"/>
            <br><br>
            学历
            <select v-model="user.grade">
                <option value="">请选择学历</option>
                <option value="zk">专科</option>
                <option value="bk">本科</option>
                <option value="ss">硕士</option>
            </select>
            <br><br>
            简介
            
            <textarea cols="50" rows="15" v-model.trim.lazy="user.introduce"></textarea>
            <br><br>
            <input type="checkbox" v-model="user.accept"/>阅读并接受协议
            <br><br>
            
            <button @click.prevent="send()">提交</button>
        </form>
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                user : {
                    username : "",
                    password : "",
                    age : "",
                    gender : "",
                    hobbies : [],
                    grade : "",
                    introduce : "",
                    accept : ""
                },
            },
            methods : {
                send(){
                    alert("ajax...");
                    console.log(JSON.stringify(this.$date));
                    console.log(JSON.stringify(this.user));
                }
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="../js/vue.js"></script>

</head>

<body>

<div id="app">





<form action="javascript:void(0)" @submit="send()">



用户名<input type="text" v-model.trim="user.username"/><br><br>

密码<input type="password" v-model="user.password"/><br><br>



年龄<input type="number" v-model.number="user.age"/><br><br>

性别:

男<input type="radio" name="gender" value="men" v-model="user.gender"/>

女<input type="radio" name="gender" value="women" v-model="user.gender"/>

<br><br>

爱好



旅游<input type="checkbox" value="trip" v-model="user.hobbies"/>

运动<input type="checkbox" value="sprots" v-model="user.hobbies"/>

唱歌<input type="checkbox" value="sing" v-model="user.hobbies"/>

<br><br>

学历

<select v-model="user.grade">

<option value="">请选择学历</option>

<option value="zk">专科</option>

<option value="bk">本科</option>

<option value="ss">硕士</option>

</select>

<br><br>

简介



<textarea cols="50" rows="15" v-model.trim.lazy="user.introduce"></textarea>

<br><br>

<input type="checkbox" v-model="user.accept"/>阅读并接受协议

<br><br>



<button @click.prevent="send()">提交</button>

</form>

</div>

<script>

const vm = new Vue({

el : "#app",

data : {

user : {

username : "",

password : "",

age : "",

gender : "",

hobbies : [],

grade : "",

introduce : "",

accept : ""

},

},

methods : {

send(){

alert("ajax...");

console.log(JSON.stringify(this.$date));

console.log(JSON.stringify(this.user));

}

}

});

</script>

</body>

</html>