Vue表单实例

2021-10-30 10:32:00 作者：互联网
<!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>表单提交实例</title>
</head>
<style>
    *{
        margin: 10px;
    }
   
</style>
<body>
    <form action="" id="form1" @submit.prevent="demo">
       账号:
       <!-- trim用于清除输入文本第一个和最后一个非空格字符前后的所有空格 -->
        <input type="text " v-model.trim="account">
        <br/>
        密码:
        <input type="text " v-model="accesskey">
        <br/>
        年龄:
        <!-- v-model.number将输入的字符自动转换为数字,number用于限制输入文本类型 -->
        <input type="number" v-model.number="age">
        <br/>
        性别:  <br/>
        <!-- name属性用于告诉表单,俩按钮是一组,只能选一个 -->
        <!-- v-model只能用于有value值的对象,要手动赋值 -->
       男<input type="radio" name="sex" value="male" v-model="sex"> 女<input type="radio" name="sex" value="female" v-model="sex">
       <br/>
       爱好: <br/>
       <!-- 对于多项选择框,需要指定value值,监控对象,并且监控对象得是数组 -->
       吃饭<input type="checkbox" v-model="hobby" value="吃饭">
       睡觉<input type="checkbox" v-model="hobby" value="睡觉">
       打豆豆<input type="checkbox" v-model="hobby" value="打豆豆">
       <br/>
       所属校区:
       <select v-model="location">
        <option value="">请选择校区</option>
        <option value="a">A区</option>
        <option value="b">B区</option>
       </select>
       <br/>
       其他信息:
       <br/>
       <!-- 延缓获取信息,当文本框失去焦点时更新内容 -->
       <textarea v-model.lazy="others"></textarea>    
       <br/>
       <input type="checkbox" v-model="agree" >阅读并同意 <a href="http://www.bilibili.com" >用户协议</a>
       <br/>
       <button @click="check">提交</button>


    </form>
</body>
<script src="../开发版/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#form1",
        data:{
            account:"",
            accesskey:"",
            age:18,
            sex:"male",
            hobby:[],
            location:"a",
            others:"",
            agree:false
        },
        methods: {
            demo(){
                
                console.log(JSON.stringify(vm._data));
            },
            check(event){
                console.log(this.agree);
                if(!this.agree){
                    alert("请阅读并同意<<用户协议>>!");
                    // 用于阻止表单提交的默认行为
                    event.preventDefault();
                }
            }
        }

    })
</script>
</html>
此实例仅判断了是否勾选了阅读用户协议，其他信息的有效性暂未验证
标签：Vue,console,log,vm,表单,实例,agree
来源： https://blog.csdn.net/mmm_morning/article/details/121047441