Vue收集表单数据和过滤器

目录

收集表单数据

收集表单数据总结 

过滤器

 过滤器小结

---

收集表单数据

    
    
    
    





    
个人信息收集
    

    姓名:

    密码:

     年龄:
   性别: 男
        女

    爱好:Java
        SpringBoot
        Vue

        所属地区:
        
            
            
                南昌
                赣州
                九江
            
            
                地方
            
        
    
        自我介绍:


     阅读并勾选
        《协议书》


        提交
    

收集表单数据总结 

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

若,因为v-model收集的为value值，所以要给这个标签配置value值，这样勾选的收集到的就是这你配置的值

若：

1、没有配置input的value属性，那么收集的就是checked(勾选或未勾选，是一个布尔值)

2、配置input的value属性：

1. v-model的初始值是非数组(一开始定义收集这个checkbox定义为字符串时)，那么收集的就是有没有勾选的布尔值
2. v-model的初始值是数组，那么收集的才是你定义的value值（勾选了才会收集）

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

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

过滤器

    
    
    
    
  



格式化前：{{NowTime}}


    使用计算属性器格式化后：{{relTime}}


    使用方法格式化后：{{MethodTime()}}


    使用过滤器格式化后：{{NowTime  | filterTime}}


    使用过滤器格式化后分割：{{NowTime  | filterTime |mySlice}}

运行结果：

 过滤器小结

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

语法：

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

备注：

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