1.Vue中表单数据的收集

若：<input type=”text”/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type=”radio”/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type=”checkbox”/>
1. 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2. 配置input的value属性:
  - (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  - (2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
- lazy：失去焦点再收集数据
- number：输入字符串转为有效的数字
- trim：输入首尾空格过滤

代码解析:

<div id="root">
   <!-- .prevent阻止默认事件 -->
   <form @submit.prevent="demo">  
      <!-- 这里的修饰符.trim是用于消除空格输入(只能是两边的,不能是字符串内部的) -->
      账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
      密码：<input type="password" v-model="userInfo.password"> <br/><br/>
      <!-- 这里的修饰符.number用于限制只能收集数字,不能收集字符 -->
      年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
      性别：
      男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
      女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
      爱好：
      抽烟<input type="checkbox" v-model="userInfo.hobby" value="study">
      喝酒<input type="checkbox" v-model="userInfo.hobby" value="game">
      烫头<input type="checkbox" v-model="userInfo.hobby" value="eat">
      <br/><br/>
      所属校区
      <select v-model="userInfo.city">
          <option value="">请选择校区</option>
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="shenzhen">深圳</option>
          <option value="wuhan">武汉</option>
      </select>
      <br/><br/>
      其他信息：
      <!-- 这里的修饰符.lazy是控制当光标移除指示框时收集数据 -->
      <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
      <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a>
      <button>提交</button>
   </form>
</div>

<script type="text/javascript">
   Vue.config.productionTip = false

   new Vue({
       el:'#root',
       data:{
           userInfo:{
               account:'',
               password:'',
               age:18,
               sex:'male',
               hobby:[],
               city:'beijing',
               other:'',
               agree:''
           }
       },
       methods: {
           demo(){
               alert('数据已提交!')
               // 前端一般将数据转成json格式在发送给后端
               console.log(JSON.stringify(this.userInfo))
           }
       }
   })
</script>

运行结果展示:

2.过滤器

定义: 对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
  1.注册过滤器：Vue.filter(name,callback) (全局) 或 new Vue{filters:{}} (局部)
  2.使用过滤器：{{ xxx | 过滤器名}} (插值语法:非常常见) 或  vbind:属性 = "xxx | 过滤器名" (单向数据绑定,比较少见,不能用在双向数据绑定)
备注:
  1.过滤器也可以接收额外参数、多个过滤器也可以串联
  2.并没有改变原本的数据, 是产生新的对应的数据

代码解析

<!-- 准备好一个容器-->
<div id="root">
    <h2>显示格式化后的时间</h2>
    <!-- 计算属性实现 -->
    <h3>计算属性实现=>现在是：{{fmtTime}}</h3>
    <!-- methods实现 -->
    <h3>方法实现=>现在是：{{getFmtTime()}}</h3>
    <!-- 过滤器实现 (方法后面不加括号也是可以执行的)-->
    <h3>过滤器实现=>现在是：{{time | timeFormater}}</h3>
    <!-- 过滤器实现（传参） -->
    <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
    <h3 :x="msg | mySlice">五邑大学</h3>
</div>

<!-- 新建一个Vue实例对象用于对比全局过滤器 -->
<div id="root2">
    <h2>{{msg | mySlice}}</h2>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    //全局过滤器
    Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })
    
    new Vue({
        el:'#root',
        data:{
            time:1621561377603, //时间戳
            msg:'你好，五邑大学'
        },
        computed: {
            fmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        methods: {
            getFmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        //局部过滤器
        filters:{
            // ES6新语法:形参后面赋值,如果没有该形参传入,按形参后的赋值传入,若有该形参传入,则按该形参传入
            timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
                // console.log('@',value)
                return dayjs(value).format(str)
            }
        }
    })

    new Vue({
        el:'#root2',
        data:{
            msg:'hello,wyu!'
        }
    })
</script>