Vue使用v-model收集各种表单数据、过滤器的示例详解_Javascript

1. 使用v-model收集各种表单数据

若<input type=“text”/>，则v-model收集的是value值，用户输入的就是value值
若<input type=“radio”/>，则v-model收集的是value值，所以要给标签配置value值
若：<input type=“checkbox”/>
- 没有配置input的value属性，那么收集的就是checked(是布尔值)，勾选一个所有的都会被勾选
- 配置input的value属性:
v-model的初始值是非数组，那么收集的就是checked(是布尔值)
v-model的初始值是数组，那么收集的的就是value组成的数组

v-model的三个修饰符：

lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：去除输入的首尾空格

使用示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!-- prevent: 点击submit不进行跳转 -->
    <form @submit.prevent="printinfo">
        账号：<input type="text" v-model.trim="userinfo.account"> <br/><br/>
        密码：<input type="password" v-model="userinfo.password"> <br/><br/>
        <!-- type="number": 现在文本框只能输入数字，但vm保存的还是字符串 -->
        年龄：<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="eat">
        <br/><br/>
        所属校区
        <select v-model="userinfo.city">
            <option value="">请选择校区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
        </select>
        <br/><br/>
        其他信息：
        <textarea v-model.lazy="userinfo.other"></textarea> <br/><br/>
        <input type="checkbox" v-model="userinfo.agree">阅读并接受<a href="http://www.baidu.com" rel="external nofollow" >《用户协议》</a>
        <button>提交</button>
    </form>
</div>
</body>
<script type="text/javascript">
    new vue({
        el:'#root',
        data:{
            userinfo:{
                account:'',
                password:'',
                age:18,
                sex:'female',
                hobby:[],
                city:'beijing',
                other:'',
                agree:''
            }
        },
        methods: {
            printinfo(){
                console.log(json.stringify(this.userinfo))
            }
        }
    })
</script>
</html>

页面显示如下：

vm显示的data如下：

2. 日期格式化

在bootcn搜索dayjs，可以看到这个日期格式化的js文件
选择复制链接，打开https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js
右键另存为进行保存

使用：

dayjs(1690497853551).format('yyyy年mm月dd日 hh:mm:ss')

不传时间戳，默认就是当前时间

3. 过滤器

不是必须要用的，用计算属性、method方法也可以实现

场景：对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
注册过滤器：全局过滤器vue.filter(name, callback)或局部过滤器new vue{filters:{}}
使用过滤器: {{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
注意：
- 过滤器可以自动接收管道符前的值，也可以接收额外参数、多个过滤器也可以串联
- 并没有改变原本的数据, 是产生新的对应的数据

使用示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
    <h2>现在是：{{time | timeformater('yyyy_mm_dd') | myslice}}</h2>
</div>
<div id="root2">
    <h2 :x="msg | myslice">hello</h2>
</div>
<script type="text/javascript">
    // 全局过滤器
    vue.filter('myslice',function(value){
        return value.slice(0,4)
    })
    new vue({
        el:'#root',
        data:{
            time:1690497853551
        },
        // 局部过滤器
        filters:{
            timeformater(value,format='yyyy年mm月dd日 hh:mm:ss'){
                return dayjs(value).format(format)
            }
        }
    })
    new vue({
        el:'#root2',
        data:{
            msg:'hello'
        }
    })
</script>
</body>
</html>

页面显示效果：