Vue收集表单数据和过滤器

news2024/11/13 9:12:17

目录

收集表单数据

收集表单数据总结 

过滤器

 过滤器小结


收集表单数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue-->
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>


</head>

<div id="root">
    <h2>个人信息收集</h2>
    <form>
    姓名:<input type="text" placeholder="请输入姓名" v-model.trim="zh"><br>
    密码:<input type="password" placeholder="请输入密码" v-model="mm"><br>
     年龄:<input type="number" placeholder="输入数字" v-model.number="age">
   性别: <label><input type="radio" name="sex" v-model="sex" value="男">男</label>
        <label><input type="radio" name="sex"  v-model="sex" value="女">女</label><br>
    爱好:<label><input type="checkbox" v-model="hobby" value="Java">Java</label>
        <label><input type="checkbox"v-model="hobby" value="SpringBoot">SpringBoot</label>
        <label><input type="checkbox"v-model="hobby" value="Vue">Vue</label><br>
        所属地区:
        <select v-model="whereFrom">
            </optgroup>
            <optgroup label="江西">
                <option value="江西南昌">南昌</option>
                <option value="江西赣州">赣州</option>
                <option value="江西九江">九江</option>
            </optgroup>
            <optgroup label="其他">
                <option value="其他地方">地方</option>
            </optgroup>
        </select><br>    <!--.lazy是等失去焦点才数据绑定 -->
        自我介绍:<br><textarea v-model.lazy="introduceMyself" placeholder="这个填写框 右下角可以拉伸"></textarea><br>
    <label> <input type="checkbox" v-model="agree">阅读并勾选</label>
        <a @click.prevent href="http://www.baidu.com">《协议书》</a><br>

        <button @click.prevent="tijiao">提交</button>
    </form>
</div>


<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            zh:'',
            mm:'',
            age:'',
            sex:'男',
            hobby:['Java'],
            whereFrom:'江西赣州',
            introduceMyself:'',
            agree:''
        },
        methods: {
            tijiao(){
                console.log(JSON.stringify(this._data))
            }
        }

    });


</script>

<body>

</body>
</html>

收集表单数据总结 

若:<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的初始值是非数组(一开始定义收集这个checkbox定义为字符串时),那么收集的就是有没有勾选的布尔值
  2. v-model的初始值是数组,那么收集的才是你定义的value值(勾选了才会收集)

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

  • lazy:失去焦点后在收集数据
  • number:输入的字符串转为有效数字
  • trim:去除输入前后的空格

过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue-->
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
  <script src="Vue文件/dayjs.min.js"></script>
</head>

<div id="root">
格式化前:{{NowTime}}<br>
<!--    使用计算属性器-->
    使用计算属性器格式化后:{{relTime}}<br>
<!--    使用方法-->
    使用方法格式化后:{{MethodTime()}}<br>
<!--    使用过滤器-->
    使用过滤器格式化后:{{NowTime  | filterTime}}<br>
<!--滤器格式化后分割前四位-->
    使用过滤器格式化后分割:{{NowTime  | filterTime |mySlice}}<br>
</div>


<script type="text/javascript">
//配置全局过滤器
 Vue.filter('mySlice',function (value) {
     //分割前四位
     return  value.slice(0,4)//从第一位开始
 })



    const vm = new Vue({
        el: '#root',
        data: {
            NowTime:1669339250633,
        },
        methods: {
            MethodTime(){
                return dayjs(this.NowTime).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        computed:{
            relTime(){
                return dayjs(this.NowTime).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        filters:{
     filterTime(value){
         return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
     },
        //    分割字串前四位
        // mySlice(value){
        //  return  value.slice(0,4)//从第一位开始
        // }
 }
    });
    console.log(vm)

</script>

<body>

</body>
</html>

运行结果:

 过滤器小结

定义:对要显示的数据进行特定格式化后再显示(使用与一些简单逻辑的处理)

语法:

  1. 注册过滤器:Vue.filter(name,callback)或new Vue{filters:{}}
  2. 使用过滤器:{{xxx | 过滤器名}}  或者 v-bind:属性="xxx | 过滤器名"

备注:

  • 过滤器也可以接受额外参数、多个过滤器件也可以串联
  • 过滤器并没有改变原本的数据,是产生新的对应的数据

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

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

相关文章

【C#】GridControl日期字段显示时分秒

系列文章 【C#】单号生成器&#xff08;编号规则、固定字符、流水号、产生业务单号&#xff09; 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/129129787 【C#】日期范围生成器&#xff08;开始日期、结束日期&#xff09; 本文链接&#xff1a;h…

Vue3+elementPlus 表格提示宽度设置无效问题

网上都说这样改 但是我的改了无效&#xff01; 试了下这样就可以了 <style lang"css">.el-popper {font-size: 14px;max-width: 600px; } </style>

【springboot test】springboot 单元测试配置文件加载顺序及覆盖关系

springboot test 配置文件加载顺序及覆盖关系 参照目录结构:1.配置文件加载基础原则:2.application.yml主配置文件加载原则:3.application.yml中指定spring.profiles.active:xxx时,xxx的加载原则:4.使用ActiveProfiles("yyy")时:5.其他自定义配置文件,如xxx.properti…

为什么需要防雷接地,防雷接地的作用是什么

为什么需要电气接地&#xff1f; 您是否曾经在工作条件下使用任何电器时接触过电击&#xff1f;几乎每个人的答案都是肯定的&#xff0c;有时这些电击是轻微的&#xff0c;但有时会对电气和电子设备造成损坏&#xff0c;并可能危及生命。为防止对人的生命和电器造成任何损害&a…

网络计算模式(一)

CDN网络概念 CDN&#xff1a;Content Delivery Network&#xff0c;即内容分发网络。 其目的是通过在现有的Internet中增加一层新的网络架构&#xff0c;将网站的内容发布到最接近用户的网络“边缘”。使用户可以就近取得所需的内容&#xff0c;解决Internet网络拥挤的状况&a…

盘点十大机器人公众号

原创 | 文BFT机器人 一、机器人大讲堂 公众号定位&#xff1a;引领行业发展的新媒体平台 更新频率&#xff1a;1篇主推3篇副推/每日更新 文章内容&#xff1a; 1. 行业市场新动态&#xff08;常作为主推&#xff09; 吸引关注科技市场动态的客户群体 2. 项目、政策 吸引需…

DI93A HESG440355R3为什么电容器分为多种?只有一种电容器不行吗?

​ DI93A HESG440355R3为什么电容器分为多种&#xff1f;只有一种电容器不行吗&#xff1f; 电子产品由不同的电子元件组成&#xff0c;包括电容器、电感器、电阻器、线圈、发电机等&#xff0c;其中电容器是常见的电子元件。电容器按照类别分为多种电容器&#xff0c;常见的有…

Barra模型因子的构建及应用系列十之Leverage因子

一、摘要 在前期的Barra模型系列文章中&#xff0c;我们构建了Size因子、Beta因子、Momentum因子、Residual Volatility因子、NonLinear Size因子、Book-to-Price因子、Liquidity因子、Earning_Yeild因子和Growth因子 &#xff0c;并分别创建了对应的单因子策略&#xff0c;其…

基于Java的医护人员排班系统设计与实现【附源码】

角色分为管理员、医生、护士 登录、注册页面&#xff1a; 工号、姓名、科室、密码、电话、性别、邮箱 管理员功能&#xff1a; 1、个人中心&#xff1a;个人信息、修改密码。 2、科室信息&#xff1a;增删改查&#xff0c;每个科室要有科室人员。 3、医生信息&#xff1a;增删改…

通过chatGPT学习:L2网络和L3网络?

下面的总结是通过chatGPT4进行的。 1、 L2网络和L3网络 L2网络和L3网络是计算机网络中的两种不同的网络类型&#xff0c;它们有一些不同的特点和应用场景。 L2网络&#xff0c;也被称为数据链路层网络&#xff0c; 主要是通过物理地址&#xff08;MAC地址&#xff09;来转发…

.Net6 导出excel使用aspose.cells23.5.0

一、测试代码 internal class Program { static void Main(string[] args) { WorkbookDesigner wb new WorkbookDesigner(new Workbook()); var style new CellsFactory().CreateStyle(); style.Borders.SetColor(C…

计算机视觉——day 92 基于跨领域协作学习的单图像去雨

基于跨领域协作学习的单图像去雨 1. Introduction3. Proposed method3.1 网络架构 4. Experiments and results4.1 数据集和指标4.3 合成图像的结果4.8 建模复杂度和运行时间 5. Conclusion 1. Introduction 深度卷积神经网络(DCNN)在图像解析任务中取得了优异的性能。然而&am…

量化投资 无套利 No-arbitrage

文章目录 量化投资 无套利 No-arbitrageState of Nature市场域 Market Span 套利 Arbitrage无套利和正线性定价规则 No-arbitrage and Positive Linear Pricing RuleImplication 1: One-price PrincipleImplication 2: PositivityImplication 3: AdditivityImplication 4: Homo…

QGIS Desktop与QGIS Server 下载安装

QGIS是一款开源的地理信息系统软件&#xff0c;全称为Quantum GIS。它提供了一系列强大的GIS功能&#xff0c;可以用于浏览、编辑、分析和处理各种地理空间信息。QGIS支持多种矢量、栅格和数据库数据格式&#xff0c;包括ESRI Shapefile、GeoJSON、GML、PostGIS、Oracle Spatia…

基于Kubernetes集群构建大中型企业CICD应用平台(8)--通过jenkins把从远程拉取的代码推送执行其他主机上,然后进行镜像打包并进行部署

一、配置Maven构建代码 代码拉取到Jenkins本地后&#xff0c;需要在Jenkins中对代码进行构建&#xff0c;这里需要Maven的环境&#xff0c;而Maven需要Java的环境&#xff0c;接下来需要在Jenkins中安装JDK和Maven&#xff0c;并且配置到Jenkins服务。 - 准备JDK、Maven压缩包…

Appuploader 常见错误及解决方法

转载&#xff1a;Appuploader 常见错误及解决方法 Appuploader是一款用于上传、管理和分享iOS应用的客户端工具。使用Appuploader可以让您更加便捷地管理和分享您的应用程序&#xff0c;同时也能够提高工作效率。本文将介绍一些常见的Appuploader错误及其解决方法。 1.登录失…

软考算法-算法篇

软考算法 一&#xff1a;故事背景二&#xff1a;分治法2.1 概念2.2 题目描述2.3 代码实现2.4 总结提升 三&#xff1a;回溯法3.1 概念3.2 题目描述3.3 代码实现3.3.1 TreeNode 类3.3.2 将数组处理成二叉树结构并且返回根节点3.3.3 进行搜索 3.4 总结提升 四&#xff1a;回溯法-…

【数据分析之道-Matplotlib(四)】Matplotlib散点图

文章目录 专栏导读1、Matplotlib散点图语法2、Matplotlib散点图设置图标大小3、Matplotlib散点图自定义点颜色4、Matplotlib散点图设置两组散点图5、Matplotlib散点图使用随机数来设置散点图6、Matplotlib散点图显示颜色条 Colormap 专栏导读 ✍ 作者简介&#xff1a;i阿极&…

Github Copilot Chat的规则泄露,详细分析这31条规则

GitHub Copilot 是一款由 GitHub 和 OpenAI 共同开发的人工智能编程助手。它是一种基于机器学习的代码自动完成工具&#xff0c;旨在帮助开发人员更高效地编写代码。 GitHub Copilot Chat是GitHub Copilot的一部分&#xff0c;它是一个基于人工智能的编程助手&#xff0c;由Op…

怎么取消只读模式?硬盘进入只读模式怎么办?

案例&#xff1a;电脑磁盘数据不能修改怎么办&#xff1f; 【今天工作的时候&#xff0c;我想把最近的更新的资料同步到电脑上的工作磁盘&#xff0c;但是发现我无法进行此操作&#xff0c;也不能对磁盘里的数据进行改动。有没有小伙伴知道这是怎么一回事&#xff1f;】 在使…