vue——收集表单数据、过滤器

最新推荐文章于 2023-12-18 22:10:48 发布

h_jQuery

最新推荐文章于 2023-12-18 22:10:48 发布

阅读量331

点赞数

分类专栏： es6 javascript Vue 文章标签：过滤器 vue filter

本文链接：https://blog.csdn.net/h_jQuery/article/details/119864416

版权

javascript 同时被 3 个专栏收录

123 篇文章 0 订阅

订阅专栏

Vue

86 篇文章 0 订阅

订阅专栏

es6

73 篇文章 0 订阅

订阅专栏

收集表单数据

若：，则v-model收集的是value值，用户输入的就是value值

若：，则v-model收集的是value值，且要给标签配置value值

若：

1.没有配置value属性，那么收集的就是checked（勾选true’ or 未勾选false）

2.配置input的value属性：

2.1 v-model的初始值是非数组，那么收集的就是checked

2.2 v-model的初始值是数组，那么收集的就是value值组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据

number：输入字符串转为有效的数字

trim：输入首尾空格过滤

<!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>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- 阻止表单的默认提交 -->
        <form @submit.prevent="demo">
            <!-- for和id配合 -->
            <label for="userName">账号：</label>
            <!-- .trim：去掉前后两端的空格 -->
            <input type="text" id="userName" v-model.trim="listData.name"><br><br>
            <label for="userPwd">密码：</label>
            <input type="text" id="userPwd" v-model="listData.pwd"><br><br> 年龄：
            <!-- .number：自动转换，输入的是number类型的不是string类型 -->
            <input type="number" v-model.number="listData.age">
            <br><br> 性别： 男
            <!-- 不是输入框类型的表单元素没有value值，就指定以一个value值 -->
            <input type="radio" name="sex" v-model='listData.sex' value='male'> 女
            <input type="radio" name="sex" v-model='listData.sex' value="female"><br><br> 爱好：
            <!-- 勾选累的也要加value值 -->
            吃<input type="checkbox" v-model='listData.hobby' value="eat"> 喝
            <input type="checkbox" v-model='listData.hobby' value="he" checked> 玩
            <input type="checkbox" v-model='listData.hobby' value="play"> 乐
            <input type="checkbox" v-model='listData.hobby' value="enjoy"><br><br> 所在校区：
            <select v-model='listData.area'>
                <option value="">请选择校区</option>
                <option value="xxt" selected>西乡塘区</option>
                <option value="lq">良庆区</option>
                <option value="qx">青秀区</option>
                <option value="xn">兴宁区</option>
            </select>
            <br><br> 其他信息：
            <!-- .lazy：在失去焦点之后才会收集数据 -->
            <textarea v-model.lazy='listData.text'></textarea>
            <br><br>
            <input type="checkbox" v-model='listData.agree'>阅读并接受<a href="javascript:;">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                listData: {
                    name: '',
                    pwd: '',
                    age: '',
                    sex: '',
                    hobby: [],
                    area: '',
                    text: '',
                    agree: ''
                }
            },
            methods: {
                demo() {
                    console.log(this.listData);
                }
            },
        })
    </script>
</body>

</html>

过滤器

定义：对要显示的数据进行特定而是花后再显示（适用于一些简单逻辑的处理）

语法：

1.注册过滤器：Vue.filter(name,callback)或new Vue(filters:{})

2.使用过滤器：{{xxx|过滤器}}或v-bind:属性=“xxx | 过滤器”

备注：

1.过滤器也可以接受额外参数，多个过滤器也可以串联

2.并没有改变原本的数据，是产生新的对应的数据

<!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>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/dayjs.min.js"></script>
</head>

<body>
    <div id="root">
        <p>当前时间的时间戳：{{t}}</p>
        <!--计算属性实现 -->
        <p>时间戳格式化之后：{{fmtTime}}</p>
        <!-- methods实现 -->
        <p>methods实现的时间：{{nowT()}}</p>
        <!-- 过滤器实现 -->
        <!-- |：是管道符，前面的值是要过滤（加工处理）的值，后面是过滤器名称 -->
        <!-- 过滤器后面不加小括号，也可以传参数过去 -->
        <p>过滤器格式化的时间：{{t|timeFmt}}</p>
        <!-- 过滤器传参：t是timeFmt()的第一个参数，YYYY/MM/DD是第二个参数 -->
        <p>过滤器改变格式化模板：{{t|timeFmt('YYYY/MM/DD')}}</p>
        <!-- 先将t作为参数传给timeFmt()得到相应的格式化之后的时间，再将得到的时间作为参数传给 mySlice，截取前四个数（年份）-->
        <p>过滤器改变格式化模板：{{t|timeFmt('YYYY-MM-DD')|mySlice}}</p>
    </div>
    <!-- 这个vue实例容器内不能使用root实例里面的局部过滤器 -->
    <div id="app">
        <p>{{msg|mySlice}}</p>
        <!-- 过滤器的另一种用法：v-bind -->
        <p :hi="say|mySlice">打工人</p>
    </div>
    <script>
        // 全局过滤器
        Vue.filter('mySlice', function(value) {
                return value.slice(0, 4)
            })
            // root
        new Vue({
            el: "#root",
            data: {
                t: ''
            },
            mounted() {
                this.newT()
            },
            methods: {
                newT() {
                    // 获取当前的时间戳
                    this.t = Date.now()
                },
                nowT() {
                    return dayjs(this.t).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            computed: {
                fmtTime() {
                    return dayjs(this.t).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            // 局部的过滤器：只在当前的vue实例内有效
            filters: {
                // str='YYYY-MM-DD HH:mm:ss'：ES6的做法，参数的默认值，若是没有传第二参数过来，就使用默认的参数
                timeFmt(value, str = 'YYYY-MM-DD HH:mm:ss') {
                    // return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
                    return dayjs(value).format(str)
                },
                /*  mySlice(value) {
                     // 只截取前四个
                     return value.slice(0, 4)
                 } */
            }
        });
        // app
        new Vue({
            el: '#app',
            data: {
                msg: 'hello!world',
                say: '早上好，打工人'
            },
            /* filters: {
                filMsg(value) {
                    return value.slice(0, 6)
                }
            } */
        })
    </script>
</body>

</html>

h_jQuery

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue——收集表单数据、过滤器

收集表单数据若：，则v-model收集的是value值，用户输入的就是value值若：，则v-model收集的是value值，且要给标签配置value值若： 1.没有配置value属性，那么收集的就是checked（勾选true’ or 未勾选false） 2.配置input的value属性： 2.1 v-model的初始值是非数组，那么收集的就是checked 2.2 v-model的初始值是数组，那么收集的就是value值组成的数组备注：v-model的三个修饰符： la
复制链接

扫一扫