当前位置: 首页 > article >正文

Vue:收集表单数据过滤器

Vue:收集表单数据&过滤器

2.11、收集表单数据

需求:收集以下表单的数据,并且对表单输入进行基本的验证,同时增加一个重置表单的功能。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>表单数据的收集</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- submit事件,prevent阻止默认行为 -->
        <form @submit.prevent="send">
            <!-- trim修饰符可以去除前后空白 -->
            用户名:<input type="text" v-model.trim="user.username" /><br /><br />
            密码:<input type="password" v-model="user.password" /><br /><br />
            <!-- number来将字符串转为数字 -->
            年龄:<input type="number" v-model.number="user.age" /><br /><br />
            <!-- v-model 主要收集的是value值,否则手机不到信息 -->
            性别: 男<input type="radio" name="gender" value="1" v-model="user.gender" /><input type="radio" name="gender" value="0" v-model="user.gender" /><br /><br />
            爱好:
            <!-- 注意:对于checkbox来说,如果没有手动指定value,
            那么会拿这个标签的checked属性的值作为value -->
            旅游<input type="checkbox" v-model="user.interest" value="travel" /> 
            运动<input type="checkbox" v-model="user.interest" value="sport" /> 
            唱歌<input  type="checkbox" v-model="user.interest" value="sing"/><br /><br />
            学历:
            <select v-model="user.grade">
                <option value="">请选择学历</option>
                <option value="zk">专科</option>
                <option value="bk">本科</option>
                <option value="ss">硕士</option>
            </select><br /><br />
            简介:
            <!-- lazy修饰符,失去焦点时再收集信息 -->
            <textarea cols="50" rows="15" v-model.lazy="user.introduce"></textarea>
            <br /><br />

            <input type="checkbox" v-model="user.accept" />阅读并接受协议<br /><br />
            <!-- <button @click.prevent="send">注册</button> -->
            <button>注册</button>
            <button @click="resetForm">重置</button>
        </form>
        <div v-if="errorMsg">{{errorMsg}}</div>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                // 将数据单独收集到一个对象中
                user: {
                    username: "",
                    password: "",
                    age: "",
                    gender: "1", //默认选中,让数据有默认值
                    interest: ["travel"],
                    grade: "ss",
                    introduce: "",
                    accept: false,
                },
                msg: "表单数据的收集",
                errorMsg: ""
            },
            methods: {
                send() {
                    // 简单的表单验证
                    if (!this.user.username) {
                        this.errorMsg = "用户名不能为空";
                        return;
                    }
                    if (!this.user.password) {
                        this.errorMsg = "密码不能为空";
                        return;
                    }
                    if (this.user.age < 18) {
                        this.errorMsg = "年龄不能小于18岁";
                        return;
                    }
                    if (!this.user.accept) {
                        this.errorMsg = "请阅读并接受协议";
                        return;
                    }
                    this.errorMsg = "";
                    // alert("ajax...!!!!");
                    // 将数据收集好,发送给服务器。
                    //JSON.parse()将字符串转为对象
                    console.log(JSON.stringify(this.user));
                },
                resetForm() {
                    this.user = {
                        username: "",
                        password: "",
                        age: "",
                        gender: "1",
                        interest: ["travel"],
                        grade: "ss",
                        introduce: "",
                        accept: false
                    };
                    this.errorMsg = "";
                }
            },
        });
    </script>
</body>

</html>

2.12、过滤器

过滤器filters适用于简单的逻辑处理,例如:对一些数据进行格式化显示。它的功能完全可以使用methods,computed来实现。过滤器可以进行全局配置,也可以进行局部配置:
① 全局配置:在构建任何Vue实例之前使用Vue.filter(‘过滤器名称’, callback)进行配置。
(把Vue.filter(‘过滤器名称’, callback)放到Vue实例(const vm = new Vue)前面)
② 局部配置:在构建Vue实例的配置项中使用filters进行局部配置。过滤器可以用在两个地方:插值语法和v-bind指令中。
(在 Vue 中,过滤器可以放入v-bind中,但不能直接放到v-model中的原因:
v-model用于实现双向数据绑定,主要用在表单元素上,如input、textarea、select等,它会根据用户在表单中的输入来实时更新数据模型,同时也会根据数据模型的变化来更新表单的显示值。
如果将过滤器直接放在v-model中,会破坏双向数据绑定的正常逻辑,因为过滤器的作用是对数据进行一次性的转换,而不是实时响应数据的双向变化。)
多个过滤器可以串联:{{msg | filterA | filterB | filterC}}
(注:要传入一个初始值即msg,是串联显示的)
过滤器也可以接收额外的参数,但过滤器的第一个参数永远接收的都是前一个过滤器的返回值(即:filterA的第一个参数是msg,filterB的第一个参数是filterA的返回值,以此类推)

需求:
从服务器端返回了一个商品的价格price,这个price的值可能是这几种情况:‘’、null、undefined、60.5
要求:
如果是’’ 、null、undefined ,页面上统一显示为 -
如果不是,则页面上显示真实的数字,并且对价格进行千分位格式化。

在Vue3当中,已经将过滤器语法废弃了。

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 计算属性实现  formatPrice -->
        <h2>商品价格:{{formatPrice}}</h2>
        <!-- 方法实现  formatPrice2() -->
        <h2>商品价格:{{formatPrice2()}}</h2>
        <!-- 过滤器实现  放在插值语法中  -->
        <h2>商品价格:{{price | filterA | filterB(3) | filterC}}</h2>
        <!-- 过滤器放入到v-bind中 ,不能放到v-model中-->
        <input type="text" :value="price | filterA | filterB(3) | filterC" />
    </div>

    <hr />
    <!-- 全局过滤器 -->
    <div id="app2">
        <h2>商品价格:{{price | filterA | filterB(3) | filterC}}</h2>
    </div>

    <script>
        // 千分位格式化函数
        function formatNumber(num) {
            return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }

        // 4、 配置全局的过滤器。
        Vue.filter("filterA", function (val) {
            if (val === null || val === undefined || val === "") {
                return "-";
            }
            return val;
        });

        Vue.filter("filterB", function (val, number) {
            return val.toFixed(number);
        });

        Vue.filter("filterC", function (val) {
            if (val!== "-") {
                return formatNumber(val);
            }
            return val;
        });

        const vm2 = new Vue({
            el: "#app2",
            data: {
                price: 20.3,
            },
        });

        const vm = new Vue({
            el: "#app",
            data: {
                msg: "过滤器",
                price: 50.6,
            },
            //1、方法实现需求
            methods: {
                formatPrice2() {
                    if (this.price === "" || this.price === undefined || this.price === null) {
                        return "-";
                    }
                    return formatNumber(this.price.toFixed(3));
                },
            },
            // 2、计算属性实现
            computed: {
                formatPrice() {
                    if (this.price === "" || this.price === undefined || this.price === null) {
                        return "-";
                    }
                    return formatNumber(this.price.toFixed(3));
                },
            },
            // 3、局部过滤器

            /* filters: {
              filterA(val) {
                if (val === null || val === undefined || val === "") {
                  return "-";
                }
                return val;
              },
              //需求: 确保传递过来的数据val,保留两位小数。
              filterB(val, number) {
                console.log(val); //此时的值时filterA的返回值
                return val.toFixed(number);
              },
            }, */
        });
    </script>
</body>

http://www.kler.cn/a/587393.html

相关文章:

  • 深入理解 HTML 中的<div>和元素:构建网页结构与样式的基石
  • phpstudy+phpstorm+xdebug【学习笔记】
  • IDEA集成git,项目的克隆,远程仓库中文件的添加删除
  • AI Agent 时代开幕-Manus AI与OpenAI Agent SDK掀起新风暴
  • STL标准库
  • C++20中的`std::endian`:深入理解大端/小端/本地字节序
  • Ubuntu 20.04使用阿里源并更新glibc到2.35版本
  • X86 RouterOS 7.18 设置笔记八:策略路由及DNS劫持
  • 剑指 Offer II 086. 分割回文子字符串
  • Redis 的应用场景
  • MyBatis SqlSessionFactory 是如何创建的?
  • 什么是 slot-scope?怎么理解。
  • 组合Ⅲ 力扣216
  • 基于express+TS+mysql+sequelize的后端开发环境搭建
  • Go语言的移动应用测试
  • uniapp-x 子组件样式覆盖
  • 【推荐项目】052-用水监控管理系统
  • MAC地址IP地址如何转换?
  • 【Linux我做主】基础命令完全指南上篇
  • 从0到1构建AI深度学习视频分析系统--基于YOLO 目标检测的动作序列检查系统:(2)消息队列与消息中间件