【Vue 快速入门系列】表单数据收集及过滤管道符的使用

简介: 【Vue 快速入门系列】表单数据收集及过滤管道符的使用

表单数据的收集


表单数据



收集到的数据

6e0917a88d3b4d70a8964151ecc5205f.png

收集方法


在Vue中通过绑定Vue对象属性与表单元素来获取表单中的数据,使用方法如下:


属性:

57aab9483a1d41a392c8769a7c132d95.png


绑定语法:


88d58a600eeb4169a96e165b0184a6c3.png


源代码如下:

将收集到的数据,通过JSON.stringify转化为JSON字符串,然后可以将收集到的数据发送到后端进行处理。
form表单内的@submit.prevent="show"是为了阻止表单提交的默认事件,而调用后面指定的show事件。


<!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 type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="demo">
        <!-- 在提交的时候回调show函数,并将刷新页面的默认事件阻止掉,可以使用ajax进行数据提交 -->
        <form @submit.prevent="show">
            <!-- 输入框 -->
            <!-- 这个lable是为了点击文字也能将光标聚焦到对应的输入框内 -->
            <label for="inputname">账号:</label><input type="text" v-model="userInfo.name" id="inputname"><br><br>
            密码:<input type="password" v-model="userInfo.password"><br><br>
            <!-- 这里的年龄要是数值类型,如果不加v-model.number那么输入的时候是数值存储的时候是字符串 -->
            年龄:<input type="number" v-model.number="userInfo.age">
            <hr>
            <!-- 单选框:name用于限定只能单选,value是其绑定的值。v-model将输入框与Vue的属性相关联 -->
            <!-- 当选定那个input框的时候就将对应的框值value送给v-model绑定的属性 -->
            性别:<input type="radio" value="男" v-model="userInfo.sex" name="sex">男
                 <input type="radio" value="女" v-model="userInfo.sex" name="sex">女 
            <hr>
            <!-- 多选框如果v-model绑定的是一个对象,则选定后只会将true交给对象,对象进而影响其他所有多选框得绑定
                 效果就是一选全选,正确的是使用一个数组进行接收,vue会自动向数组内添加移除元素属性
            -->
            爱好: <input type="checkbox" v-model="userInfo.hobbys" value="打篮球"> 打篮球 
                <input type="checkbox" v-model="userInfo.hobbys"  value="踢足球">踢足球 
                <input type="checkbox" v-model="userInfo.hobbys"  value="打排球">打排球
            <hr>
            <!-- 下拉框只需要绑定一下即可,与其他无太大差别 -->
            所在地区:<select name="area" v-model="userInfo.area">
                <option value="">请您选择</option>
                <option value="北京">北京</option>
                <option value="河南">河南</option>
                <option value="上海">上海</option>
            </select>
            <hr>
            <!-- 常规用法 -->
            其他信息:<textarea v-model="userInfo.textareas" cols="30" rows="10"></textarea>
            <hr>
            <!-- 常规用法 -->
            <input type="checkbox" v-model="userInfo.tag" name="argee">请阅读协议,并勾选同意 <a href="#">《协议》</a> 
            <hr>
            <button>点击提交表单</button>
        </form>
    </div>
</body>
<script>
    let vm=new Vue({
        el:"#demo",
        data:{
            userInfo:{
                name:"",
                password:"",
                age:0,
                sex:"",
                hobbys:[],
                area:"",
                textareas:"",
                tag:false
            }
        },
        methods: {
            show() {
                console.log(JSON.stringify(this.userInfo))
            }
        },
    })
</script>
</html>


管道符的使用


   过滤器分类:
       全局过滤器:所有的vm对象绑定的模板都可以使用(一般配置在创建vm对象之前)
       局部过滤器:只有改模板能够使用(配置在Vue对象内部)
   为什么要是用过滤器:达到对数据的筛选
   使用语法:
       1.注册全局或者局部过滤器
       2.使用过滤器(插值语法与指令语法都可以使用) 表达式与过滤器之间用管道符|连接、
   备注:
       过滤器可以接收额外的参数,多个过滤器可以串联
       并未改变原有的数据,产生新的对应的数据
       一般功能较为强大且通用的过滤器设为全局的否则设为局部的

64b2b7bee4a34c119e0f958aac6d3376.png


源代码:


<!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 type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
    <div id="demo">
        <h2>以时间为基础,使用过滤器对时间进行格式化</h2>
        <!-- <div >获取到当前的时间戳{{new Date().getTime()}}</div> -->
        <!-- 使用计算属性实现格式化时间 -->
        <h3>计算属性进行时间格式化:{{fmtTime}}</h3>
        <!-- 使用方法实现格式化时间 -->
        <h3>使用方法进行时间格式化:{{gettimefat()}}</h3>
        <!-- 使用过滤器实现格式化时间 -->
        <h3>使用过滤器进行时间格式化:{{nowTime | timefmat}}</h3>
        <!-- 使用过滤器传参实现 -->
        <h3>使用过滤器传参时间格式化:{{nowTime | timefmat('YYYY-MM-DD HH:mm:ss')}}</h3>
        <!-- 连续调用两次过滤器 -->
        <h3>使用全局过滤器:{{mydata | myFirstTree |myFirstTree}}</h3>
    </div>
</body>
<script>
    // 定义一个全局过滤器
    // 语法:Vue.filter(过滤器名称,回调函数)
    Vue.filter("myFirstTree",function(value){
        // 每次返回第一个到最后一个字符
        return value.slice(1,value.lenth)
    })
    let vm=new Vue({
        el:"#demo",
        data:{
            nowTime:1663813038711,
            mydata:"Hello Tom"
        },
        computed:{
            fmtTime(){
                return dayjs(this.nowTime).format("YYYY年MM月DD日 HH:mm:ss")
            }
        },
        methods: {
            gettimefat() {
                return dayjs(this.nowTime).format("YYYY年MM月DD日 HH:mm:ss")
            }
        },
        filters:{
            timefmat(value,str="YYYY年MM月DD日 HH:mm:ss"){
            return dayjs(value).format(str)
            }
        }
    })
</script>
</html>
目录
打赏
0
0
0
0
3
分享
相关文章
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
163 0
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
142 17
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
78 1
Vue框架中常见指令的应用概述。
通过以上的详细解析,你应该已经初窥Vue.js的指令的威力了。它们是Vue声明式编程模型的核心之一,无论是构建简单的静态网站还是复杂的单页面应用,你都会经常用到。记住,尽管Vue提供了大量预定义的指令,你还可以创建自定义指令以满足特定的需求。为你的Vue应用程序加上这些功能增强器,让编码变得更轻松、更愉快吧!
35 1
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
95 0
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
45 0
快速入门vue,爆肝一万多字,“建议收藏”,用到省的百度了(含实战案例)
快速入门vue,爆肝一万多字,“建议收藏”,用到省的百度了(含实战案例)
150 0
|
3月前
|
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
355 4
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
230 77
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问