zoukankan      html  css  js  c++  java
  • Vue12 -- 表单的数据收集

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <form action="" method="post" @submit.prevent="sub">
                    <input type="text" name="" v-model="user" />
                    <input type="password" name="" v-model="pwd" />
                    <br />
                    性别:
                    <input type="radio" name="sex" value="男" v-model="sex"><input type="radio" name="sex" value="女" v-model="sex"><br />
                    爱好:
                    <input name="Fruit" type="checkbox" value="足球" v-model="hobby"/>足球
                    <input name="Fruit" type="checkbox" value="篮球" v-model="hobby"/>篮球
                    <input name="Fruit" type="checkbox" value="乒乓球" v-model="hobby" />乒乓球
                    <br />
                    城市:
                    <select name="carlist" form="carform" v-model="cityid">
                        <option value="">请选择</option>
                       <option :value="index" v-for="(city,index) in citys">{{city.city}}</option>
                       
                    </select> 
                    <br />
                    描述:
                    <textarea name="" rows="" cols="" v-model="ms"></textarea>
                    <br />
                    <input type="submit" value="提交" />
                </form>
            </div>
            
            <script src="https://vuejs.org/js/vue.js"></script>
            <script type="text/javascript">
                var app = new Vue({
                    el:'#app',
                    data:{
                        user:'',
                        pwd:'',
                        sex:'',
                        hobby:[],
                        cityid:'',
                        citys:[
                            {id:1,city:'CQ'},
                            {id:2,city:'BJ'},
                            {id:3,city:'SH'},
                        ],
                        ms:''
                    },
                    methods:{
                        sub(){
                            console.log(this.user,this.pwd)
                        }
                    }
                })
            </script>
        </body>
    </html>
  • 相关阅读:
    html5 自定义属性data-*
    企业微信接口授权
    js对象---字符串
    谈谈html5新增的元素及其他功能
    模拟缓存
    jdbc数据库连接
    面向对象的理解
    最简单的Spring+SpringMVC+Mybatis的整合
    EF报错 附加类型model失败
    c# Web服务远程“调用”调试
  • 原文地址:https://www.cnblogs.com/lee-xingxing/p/11216614.html
Copyright © 2011-2022 走看看