vue 处理表单数据

最新推荐文章于 2023-03-11 14:46:47 发布

原创最新推荐文章于 2023-03-11 14:46:47 发布 · 542 阅读

2 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

28 篇文章

订阅专栏

文章目录

- - 基本用法
  - 表单修饰符

基本用法

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
    <div id="app">
    	<!--prevent 阻止默认事件-->
        <form action="/login" @submit.prevent="submit">
            用户名: <input type="text" v-model="username"> <br>
            密码: <input type="password" v-model="password"> <br>
            性别: <input type="radio" id="male" name="sex" v-model="sex" value="male"> <label for="male">男</label>
            <input type="radio" id="female" name="sex" v-model="hobby" value="female"> <label for="female">女</label> <br>
            爱好: <input type="checkbox" id="basket" v-model="hobby" value="basket"> <label for="basket"> 篮球 </label>
            <input type="checkbox" id="foot" v-model="hobby" value="foot"> <label for="foot">足球</label>
            <input type="checkbox" id="pp" v-model="hobby" value="pp"> <label for="pp"> 乒乓球 </label> <br>
            城市: <select name="" id="city" v-model="city">
                    <option value="未选择">未选择</option>
                    <option value="sh">sh</option>
                    <option value="wh">wh</option>
                    <option value="gd">gd</option>
        </select> <br>

            <textarea name="" id="text" cols="30" rows="10" v-model="desc"></textarea> <br>
            <input type="submit">
        </form>

    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                username: '',
                password:'',
                sex: 'male',
                hobby:[],
                city:'gd',
                desc:''
            },
            methods:{
                submit(){
                    console.log(this.username, this.password, this.sex, this.hobby, this.city, this.desc)
                }
            },

        })
    </script>
</body>
</html>

在这里插入图片描述

表单修饰符

.number 转换为数值
- 注意点：
- 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
- 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。
.trim 自动过滤用户输入的首尾空白字符
- 只能去掉首尾的不能去除中间的空格

.lazy 将input事件切换成change事件

.lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
在失去焦点或者按下回车键时才更新

<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">

<!--自动过滤用户输入的首尾空白字符   -->
<input v-model.trim="msg">

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >