Vue使用v-model收集各种表单数据、过滤器

news2024/9/25 9:39:30

1. 使用v-model收集各种表单数据

若<input type=“text”/>，则v-model收集的是value值，用户输入的就是value值
若<input type=“radio”/>，则v-model收集的是value值，所以要给标签配置value值
若：<input type=“checkbox”/>
1. 没有配置input的value属性，那么收集的就是checked(是布尔值)，勾选一个所有的都会被勾选
2. 配置input的value属性:
  1. v-model的初始值是非数组，那么收集的就是checked(是布尔值)
  2. v-model的初始值是数组，那么收集的的就是value组成的数组

v-model的三个修饰符：

lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：去除输入的首尾空格

使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>


<div id="root">
    <!-- prevent: 点击submit不进行跳转 -->
    <form @submit.prevent="printInfo">
        账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
        密码：<input type="password" v-model="userInfo.password"> <br/><br/>
        <!-- type="number": 现在文本框只能输入数字，但vm保存的还是字符串 -->
        年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
        性别：
        男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
        女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
        爱好：
        学习<input type="checkbox" v-model="userInfo.hobby" value="study">
        吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
        <br/><br/>
        所属校区
        <select v-model="userInfo.city">
            <option value="">请选择校区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
        </select>
        <br/><br/>
        其他信息：
        <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
        <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
        <button>提交</button>
    </form>
</div>

</body>

<script type="text/javascript">

    new Vue({
        el:'#root',
        data:{
            userInfo:{
                account:'',
                password:'',
                age:18,
                sex:'female',
                hobby:[],
                city:'beijing',
                other:'',
                agree:''
            }
        },
        methods: {
            printInfo(){
                console.log(JSON.stringify(this.userInfo))
            }
        }
    })
</script>

</html>

页面显示如下：

vm显示的data如下：
vm的data

2. 日期格式化

在bootcn搜索dayjs，可以看到这个日期格式化的js文件
选择复制链接，打开https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js
右键另存为进行保存

使用：

dayjs(1690497853551).format('YYYY年MM月DD日 HH:mm:ss')

不传时间戳，默认就是当前时间

3. 过滤器

不是必须要用的，用计算属性、method方法也可以实现

场景：对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
注册过滤器：全局过滤器Vue.filter(name, callback)或局部过滤器new Vue{filters:{}}
使用过滤器: {{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
注意：
1. 过滤器可以自动接收管道符前的值，也可以接收额外参数、多个过滤器也可以串联
2. 并没有改变原本的数据, 是产生新的对应的数据

使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
    <script type="text/javaScript" src="../js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
    <h2>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h2>
</div>

<div id="root2">
    <h2 :x="msg | mySlice">hello</h2>
</div>

<script type="text/javascript">

    // 全局过滤器
    Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })

    new Vue({
        el:'#root',
        data:{
            time:1690497853551
        },
        // 局部过滤器
        filters:{
            timeFormater(value,format='YYYY年MM月DD日 HH:mm:ss'){
                return dayjs(value).format(format)
            }
        }
    })

    new Vue({
        el:'#root2',
        data:{
            msg:'hello'
        }
    })
</script>

</body>
</html>

页面显示效果：