Vue_1-8_表单输入绑定

陪你去流浪_

于 2021-07-02 18:06:54 发布

阅读量81

点赞数

本文链接：https://blog.csdn.net/Jokerxiuka/article/details/118421103

版权

本文展示了如何在Vue.js中使用v-model进行表单数据绑定，包括文本、密码、性别、复选框、单选按钮和下拉选择等元素。在表单提交时，通过@submit.prevent阻止默认行为并调用handleSubmit方法，打印收集到的数据。

摘要由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>
    <!-- 
        1.使用v-model自动收集数据
        text/textarea
        checkbox
        radio
        select
     -->
     <div id="app">
        <form action="/xxx" @submit.prevent="handleSubmit">
            <!-- .prevent阻止默认行为，点击提交按钮，却不提交表单 -->
            <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="pingpang" value="pingpang" v-model="likes">
            <label for="pingpang">乒乓</label><br>

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

            <span>介绍</span>
            <textarea rows="10" v-model="desc"></textarea><br><br>
            <input type="submit" value="注册">
        </form>
     </div>
     <script src="./js/vue.js"></script>
     <script>
         new Vue({
             el:'#app',
             data:{
                 username:'',
                 pwd:'',
                 sex:'女',//这里只能写value，及 男 或 女
                 likes:['basket'],//给默认数据
                 allCitys:[
                     {id:1,name:'北京'},
                     {id:2,name:'上海'},
                     {id:3,name:'广州'},
                 ],
                 cityId:1,//给默认数据
                 desc:''
             },
             methods:{
                 handleSubmit(){
                    console.log(this.username,this.pwd,this.sex,this.likes,this.cityId,this.desc);
                 }
             }
         })
     </script>
</body>
</html>