Vue_表单数据的自动收集

最新推荐文章于 2023-04-29 08:29:48 发布

Cecilia58

最新推荐文章于 2023-04-29 08:29:48 发布

阅读量105

点赞数

分类专栏： vue 文章标签：前端

本文链接：https://blog.csdn.net/Cecilia58/article/details/115408298

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客展示了如何在Vue.js中使用v-model进行双向数据绑定，涵盖了文本输入、复选框、单选按钮和下拉选择的交互。通过v-model，可以轻松收集表单数据。示例包括用户名、密码输入，性别选择（女性和男性），爱好（篮球、足球、乒乓球）的多选，以及城市选择。在表单提交时，会弹出警告并打印出所有收集到的数据。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 使用v-modeL(双向数据绑定)自动收集数据
    text/textarea
    checkbox
    radio
    select
 -->
<div id="demo">
 <form action="/xxx" @submit.prevent='handsubmit'>
    <span>用户名：</span>
    <input type="text" v-model="username"></br>

    <span>密码：</span>
    <input type="password" v-model="pwd"> </br>

    <span>性别：</span>
    <input type="radio" id="female" value="女" v-model="sex">
    <label for="female">女</label>
    <input type="radio" id="male" value="男" v-model="sex">
    <label for="male">男</label> </br>

    <span>爱好：</span>
    <input type="checkbox" id="basket" value="basket" v-model="likes">
    <label for="basket">篮球</label>
    <input type="checkbox" id="foot" value="foot" v-model="likes"> 
    <label for="foot">足球</label>
    <input type="checkbox" id="pingpong" value="pingpong" v-model="likes">
    <label for="pingpong">乒乓球</label>
    <br>

    <span>城市：</span>
    <select v-model="cityId">
        <option value=""> 未选择</option>
        <option :value="city.id" v-for="(city , index) in allCitys" :key='index'> {{city.name}}</option>

    </select>
    </br>
    <span>介绍：</span>
    <textarea rows="10" v-model="desc"></textarea>
    <br>
    <input type="submit" value="注册">

</form>
</div>
</body>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
var vue = new Vue({
    el:'#demo',
    data:{
        username:'',
        pwd:'',
        sex:'女',
        likes:["foot"],
        allCitys:[{id:1,name:'北京'},{id:2,name:'上海'}],
        cityId:'',
        desc:"",
    },
    methods:{
        handsubmit(){
            alert(this.username, this.pwd)
            console.log(this.username,this.pwd,this.sex,this.likes,this.allCitys,this.cityId,this.desc)
        }
    }
})
</script>
</html>