Vue学习日记（10）收集表单数据、过滤器

最新推荐文章于 2024-07-24 22:02:04 发布

明日之星3559727

最新推荐文章于 2024-07-24 22:02:04 发布

阅读量238

点赞数

分类专栏： Vue 文章标签： Vue 前端 vue.js

本文链接：https://blog.csdn.net/qq3559727/article/details/121675024

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

该博客展示了如何在Vue.js中处理表单数据，包括使用v-model.trim过滤输入的空格，v-model.number转换数字类型，以及通过v-model收集复选框和单选按钮的选择。此外，还介绍了全局和局部过滤器的创建与使用，如ftime过滤器用于日期格式化，并展示了过滤器串联和传参的用法。

摘要由CSDN通过智能技术生成

收集表单数据

在这里插入图片描述

<div id="root">
        <form @submit.prevent="demo">
            <!-- .trim 过滤掉空格 -->
            帐号：<input type="text"  v-model.trim="account"><br><br>
            密码：<input type="password"  v-model="password"><br><br>
            <!-- .number 转换数字类型 -->
            年龄：<input type="number"  v-model.number="age"><br><br>
            性别：
            男：<input type="radio"  v-model="sex" value="male">
            女：<input type="radio"  v-model="sex" value="female"><br><br>
            爱好：
            抽烟<input type="checkbox"  v-model="hobby" value="cy">
            喝酒<input type="checkbox"  v-model="hobby" value="hj">
            烫头<input type="checkbox"  v-model="hobby" value="tt"><br><br>
            所属校区：
            <select  v-model="city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="dalian">大连</option>
            </select><br><br>
            其他信息：
            <!-- .azy 失去焦点后才收集 -->
            <textarea v-model.zay="other"></textarea><br><br>
            <input type="checkbox" v-model="agree" >
            阅读并接受<a href="http://163.com">《用户协议》</a><br><br>
            <button>提交</button>

        </form>
        
    </div>

    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el:'#root',
            data:{
                account:'',
                password:'',
                age:'',
                sex:'female',
                hobby:[],
                city:'dalian',
                other:'',
                agree:''
            },
            methods: {
                demo(){
                    console.log(JSON.stringify(this._data))
                }
            },
        })
    </script>

过滤器

在这里插入图片描述

<div id="root">
        <h2>显示格式化后的时间</h2>
        <h3>现在的时间：{{time}}</h3>
        <!-- 计算属性实现 -->
        <h3>格式化后的时间：{{fmtime}}</h3>
        <!-- methods实现 -->
        <h3>格式化后时间：{{getfmtime()}}</h3>
        <!-- 过滤器实现(传参) -->
        <h3>现在是：{{time|ftime("YYYY-MM")}}</h3>
        <!-- 过滤器串联 -->
        <h3>现在是：{{time|ftime|fstime}}</h3>
        <!-- 过滤器(传参)+串联 -->
        <h3>现在是：{{time|ftime("YYYY-MM")|fstime}}</h3>

    </div>


    <script>
        Vue.config.productionTip = false
        // 全局过滤器
        Vue.filter('fstime',function(val){
            return val.slice(0,4)
        })

        const vm = new Vue({
            el:'#root',
            data:{
                time:1638426826585
            },
            computed:{
                fmtime(){
                    // dayjs() 不传值，则返回当前时间戳的格式化内容
                    return  dayjs().format('YYYY年MM月DD日 HH:mm:ss')
                }
            },
            methods: {
                getfmtime(){
                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
                }
            },
            // 局部过滤器
            filters:{
                ftime(val,s='YYYY年MM月DD日'){
                    return dayjs(val).format(s)
                }
               
            }
        })
    </script>