Vue中表单数据和过滤器的简单使用

  • 收集表单数据

  • v-model的三个修饰符:

    lazy:失去焦点在收集数据

    number: 输入字符串转为有效数字

    trim:输入首尾空格过滤

  • < input type="text" v-model="person.account">则v-model收集的是value值,用户输入的就是value值

  • < input type="checkbox">

    1.没有配置value属性时,收集的是checked(布尔值)

    2.配置value属性时

    v-model初始值为非数组,收集的是checked(布尔值)

    v-model初始值为数组,收集的是value值组成的数组

  • <template><div id="root"><!-- prevent阻止默认行为,阻止提交信息后跳转页面 --><form @submit.prevent="demo"><!-- demo作为标签放入input 中,这样写的目的是点击"账号:"也可以选中输入框--><label for="demo">账号:</label><input type="text" id="demo"><br/><br/><!-- trim作用是输入空格data不进行收集 -->账号:<input type="text" v-model.trim="person.account">密码:<input type="password" v-model="person.password"><!-- 第一个number只能输入数字类型,第二个number将输入的数字类型替换data中默认的字符类型 -->年龄:<input type="number" v-model.number="person.age"><br /><br /><!-- value用于监测数据改变,name为属性名,value为属性值 -->性别:男<input type="radio" name="sex"  v-model="person.sex" value="male">女<input type="radio" name="sex" v-model="person.sex" value="female"><br/><br/>爱好:<!-- 不加value值进行区分,勾选一个,所有选项都为true。收集的是布尔值。-->学习:<input type="checkbox" v-model="person.hobby" value="study"  >读书:<input type="checkbox" v-model="person.hobby" value="game"  >年龄:<input type="checkbox" v-model="person.hobby" value="age " >  <br/><br/>所属的地址:<select v-model="person.city " ><option value="beijing">北京</option><option value="guangxi">广西</option><option value="shenzhen">广州</option><option value="nanning">南宁</option></select><br><br><!-- lazy让信息输入完后,data在收集数组 -->其他信息:<textarea v-model.lazy="person.other"></textarea><br><br>阅读并接受:<input type="checkbox" v-model="person.anniu"><a href="#">《用户协议》</a><button>提交</button></form></div>
    </template>
    ​
    <script>
    export default {name: 'selectMain',data () {return {person: {account: '',password: '',age: '',sex: 'female',hobby: [],city: '',other: '',anniu: ''}}},methods: {demo(){// 将表格的数据打印成json类型console.log(JSON.stringify(this.person));}},
    </script>
    ​

    过滤器

  • 过滤器用于样式的叠加变化

  • 安装dayjs

  • npm install dayjs --save
  • 以下代码为vue的局部过滤器,代码通过引用dayjs。分别用methods和computed实现日期格式的改变,之后用过滤器实现日期格式的改变

  • <template><div><!--用计算属性写出 --><h3>现在是:{{ flashTime  }}</h3> <!-- 用methods写出 --><h3>现在是:{{ getflash() }}</h3><!-- 过滤器 定义的timeFormate是一个函数,将time作为参数传给timeFormate,该函数的返回值替换{{}}里面的内容。|号为管道符--><h3>现在是:{{ time | timeFilters | upDatetime }}</h3></div>
    </template>
    <script scoped>
    //通过npm install dayjs --save
    import dayjs from 'dayjs';
    export default {name: 'selectMain',data () {return {//设置时间time: 12345678945645}},
    //周期钩子,用于初始化time时调用flashTime()函数mounted(){dayjs.flashTime()},computed:{flashTime(){// format()的括号是格式,如把YYYY-MM-DD改成YYYY年MM月DD日return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')}},methods: {getflash(){return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')}},// 过滤器filters: {timeFilters(value){return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')},// 利用过滤器可以串联的性质,添加从索引0开始,只显示四位upDatetime(value){return value.slice(0,4);}}
    }
    </script>
  • 全局过滤器

  • <template><div><!-- 过滤器 定义的timeFormate是一个函数,将time作为参数传给timeFormate,该函数的返回值替换{{}}里面的内容。|号为管道符--><h3>现在是:{{ time | timeFilters | upDatetime  }}</h3></div>
    </template>
    <script scoped>
    Vue.config.productionTip = false
    // 导入第三方库,dayjs。
    import dayjs from 'dayjs';
    // 导入Vue设置过滤器的全局变量
    import Vue from 'vue'
    // 设置全局变量,upDatetime为函数名,
    Vue.filter('upDatetime',function(value){return value.slice(0, 4);
    })
    export default {name: 'selectMain',data () {return {//设置时间time: 12345678945645}},// 过滤器filters: {timeFilters(value){return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')}}
    }
    </script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/231489.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分布式理论 | RPC | Spring Boot 整合 Dubbo + ZooKeeper

一、基础 分布式理论 什么是分布式系统&#xff1f; 在《分布式系统原理与范型》一书中有如下定义&#xff1a;“分布式系统是若干独立计算机的集合&#xff0c;这些计算机对于用户来说就像单个相关系统”&#xff1b; 分布式系统是由一组通过网络进行通信、为了完成共同的…

Django 构建动态前端页面详解

概要 Django 是一个强大的 Python Web 框架&#xff0c;广泛用于后端开发。然而&#xff0c;它也支持直接使用 HTML, CSS, 和 JavaScript 来构建动态的前端界面。本文将详细介绍如何在 Django 项目中使用这些技术&#xff0c;包括设置静态文件、编写 HTML 模板以及集成 JavaSc…

教育机构小程序管理系统的全方位优化

随着互联网的快速发展&#xff0c;线上教育也日益受到人们的关注和欢迎。为了满足广大学生和家长的需求&#xff0c;教育机构纷纷开发出自己的小程序管理系统。本文将详细介绍如何使用乔拓云平台&#xff0c;一键开发出自己的教育机构小程序管理系统。 1.进入乔拓云后台 首先&…

【难点】【LRU】146.LRU缓存

题目 法1&#xff1a;基于Java的LinkedHashMap 必须掌握法1。参考链接 关于LinkedHashMap的介绍 class LRUCache {int cap;LinkedHashMap<Integer, Integer> cache new LinkedHashMap<>();public LRUCache(int capacity) { this.cap capacity;}public int get…

Linux性能优化常做的一些事情

Linux性能优化是一个广泛的主题&#xff0c;涉及多个方面。以下是一些常见的Linux性能优化建议&#xff1a; 硬件和系统配置&#xff1a; 使用SSD替代HDD。确保系统有足够的RAM。使用多核CPU。配置合适的网络硬件和带宽。 磁盘I/O性能&#xff1a; 使用RAID来提高I/O性能。使用…

回归烟火气,中国烹饪正在进行一场重构

当前的中国厨电行业&#xff0c;急需一场前所未有的变革。 近几年&#xff0c;厨电行业已告别以往的跨越式增长&#xff0c;多数厨电企业陷入迷茫&#xff0c;如何才能打破增长瓶颈&#xff1f;《一点财经》认为&#xff0c;只有积极适应新形势&#xff0c;探索新的经营方式&a…

考拉兹猜想

考拉兹猜想&#xff08;Collatz conjecture&#xff09;又称奇偶归一猜想&#xff0c;是指对于每一个正整数&#xff0c;如果它是奇数&#xff0c;则对它乘3再加1&#xff0c;如果它是偶数&#xff0c;则对它除以2。如此循环&#xff0c;最终都能得到1。 编写一个程序&#xff…

【web安全】支付篡改

前言 菜某的总结&#xff0c;如有错误和补充欢迎评论指正。 内容仅供学习使用&#xff0c;切勿用于非法用途。 支付篡改的存在位置与影响 首先他的危害不言而喻&#xff0c;几乎任何一个拿出来都能给企业带来巨大的损失。 他出现的地方也是十分的广泛&#xff0c;从某种意…

复杂背景下的低空无人机检测与跟踪算法

doi&#xff1a;10.11884/HPLPB202335.230026 大视场中的目标丢失后需要再次检测&#xff0c;但是大视场的检测比较耗时。但是根据实验发现丢失目标通常发生在无人机运动区域的320x320范围内&#xff0c;所以设计辅助网络&#xff0c;当目标丢失后&#xff0c;以320x320区域图像…

Transformer Decoder的输入

大部分引用参考了既安的https://www.zhihu.com/question/337886108/answer/893002189这篇文章&#xff0c;个人认为写的很清晰&#xff0c;此外补充了一些自己的笔记。 弄清楚Decoder的输入输出&#xff0c;关键在于图示三个箭头的位置&#xff1a; 以翻译为例&#xff1a; 输…

七轴开源协作机械臂myArm视觉跟踪技术!

引言 ArUco标记是一种基于二维码的标记&#xff0c;可以被用于高效的场景识别和位置跟踪。这些标记的简单性和高效性使其成为机器视觉领域的理想选择&#xff0c;特别是在需要实时和高精度跟踪的场景中。结合机器学习和先进的图像处理技术&#xff0c;使用ArUco标记的机械臂系统…

20231218在Ubuntu18.04下以EXT4格式化HDD

20231218在Ubuntu18.04下以EXT4格式化HDD 2023/12/18 17:24 缘起&#xff1a; 编译一个Android10大概要200GB&#xff0c;编译10个Android10的SDK&#xff0c;3TB的HDD机械硬盘就估计会被填满了&#xff01; 如果使用rm -rf *这个命令将SDK一个一个逐个地删除&#xff0c;估计2…

Qt之图像处理

QPainter 绘制基本图形的类 一次性填充绘制 QVector<QPoint> drawPointsGray;//存储灰色的点 //...将所有要画灰色的点加入该数组中 painter.setPen(Qt::gray);//设置颜色 painter.drawPoints(drawPointsGray.data(), drawPointsGray.size());//测试 QImage 根据地址…

数据可视化(附带操作实例)

一、主要目的&#xff1a; 数据可视化是关于图形或表格的数据展示&#xff0c;旨在借助图形化手段&#xff0c;清晰有效的传达与沟通信息。通过直观地传达关键内容与特征&#xff0c;从而实现对相当稀疏而又复杂的数据集的深入洞察。熟悉在Python开发环境中支持数据可视化环节…

mybatis.interceptor.exception.SqLValidateException:Ilegal SQL::......

现象&#xff1a;⬇️ 描述&#xff1a;执行 SQL 没问题&#xff0c;应用代码报错 ⬇️ .mybatis.interceptor.exception.SqLValidateException&#xff1a;Ilegal SQL::SELECT voucherNo FROM voucher ORDER BY CAST(SUBSTRING(voucherNo FROM LOCATE(_, voucherNo) 1) AS U…

力扣刷题记录(15)LeetCode:509、70、746

目录 509.斐波那契数 70.爬楼梯 746.使用最小花费爬楼梯 总结 ​​​​​​ 用一个数组来存储前两个数的值&#xff0c;然后根据前两个数的值来确定当前的值。 class Solution { public:int fib(int n) {if(n<2) return n;vector<int> v;v.push_back(0);v.push…

ELK(九)—logstash

目录 简介安装部署测试 配置详解编写配置文件连接elasticsearch将数据推送到elasticsearch中。 简介 Logstash 是一个开源的服务器端数据处理管道&#xff0c;由 Elastic 公司维护和开发。它被设计用于从不同来源收集、处理和转发数据&#xff0c;以供 Elasticsearch 进行存储…

持续集成交付CICD:Jenkins使用GitLab共享库实现前端项目镜像构建

目录 一、实验 1. GitLab修改项目文件与Harbor环境确认 2.Jenkins使用GitLab共享库实现前端项目镜像构建 3.优化CI流水线封装Harbor账户密码 4.Jenkins再次使用GitLab共享库实现前端项目镜像构建 一、实验 1. GitLab修改项目文件与Harbor环境确认 &#xff08;1&#xf…

掌握 Babel:让你的 JavaScript 与时俱进(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

【期末复习向】文本理解与数据挖掘-名词解释

&#xff08;一&#xff09;什么是自然语言处理 1.自然语言处理&#xff08;NLP&#xff09; 从最广泛的意义上说&#xff0c;NLP指的是任何自动处理人类语言的程序 &#xff08;二&#xff09;一系列自然语言处理问题 2.NLP常用方法 基于规则的方法&#xff08;基于人工标…