Vue使用v-model实现表单动态收集

欢迎大家加入我的github项目,一起学习,一起发展
---> 全栈工程师进阶学习站
---> 我的前端学习笔记
--->行业内最新最群的报告,工作日每日更新

—>原生 js 训练计划


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>

<body>
    
    <div id="app">
        <form action="/xxx" @submit.prevent="handleSubmit">
            <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="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}option>
            select><br>
            <span>介绍: span>
            <textarea rows="10" v-model="info">textarea><br><br>

            <input type="submit" value="注册">
        form>
    div>

body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>

<script>

    const vm = new Vue({

        el: '#app',
        data: {
            username: '',
            pwd: '',
            sex: '男',
            likes: ['foot'],
            allCitys: [{ id: 1, name: '北京' }, { id: 2, name: '上海' }, { id: 3, name: '杭州' }],
            cityId: '2',
            info: ''
        },
        methods: {
            handleSubmit() {
                console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
                // alert('提交注册的ajax请求')
                alert('已提交请求');
            }
        }
    })


script>

html>

```闲聊时刻

10年短信公司,互联网100强企业!主营业务:短信(国内和国际)App H5一键免密登录,防薅羊毛接口,图片OCR,空号检测,活跃号检测,人证核验,活体检测,高防ddos攻击等等200多个企业服务接口!需要的联系他13592366783 官方链接:https://zz.253.com/v5.html#/register?uid=1953

自己公司需求 偶然间 用了一家第三方接口供应商,产品应有尽有,很齐全,对接文档非常详细,彼此都很节约时间,主要非常稳定,包括服务方面很给力,有兴趣的博友,可以联系他,算是对合作伙伴的支持了


你可能感兴趣的:(vue,大前端,Javascript)