Vue收集表单数据、过滤器

最新推荐文章于 2024-06-15 14:41:39 发布

HeX_7

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量141

点赞数

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

本文链接：https://blog.csdn.net/hex_7/article/details/124626429

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

收集表单数据.

若: <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:输入首尾空格过滤

<body>
    <div id="root">
        <form @submit.prevent="demo">
            账号：<input type="text" v-model.trim="userInfo.account"><br><br>
            密码：<input type="password" v-model="userInfo.password"><br><br>
            年龄：<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="sahnghai">上海</option>
                <option value="shenzhen">深圳</option>
            </select><br><br>
            其他信息：
            <textarea v-model.lazy="userInfo.other"></textarea><br><br>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>

    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;

        var vm = new Vue({
            el:"#root",
            data:{
                userInfo:{
                    account:'',
                    password:'',
                    age:18,
                    sex:'female',
                    hobby:[],
                    city:'beijing',
                    other:'',
                    agree:''
                }
            },
            methods:{
                demo(){
                    console.log(JSON.stringify(this.userInfo));
                }
            }
        })

    </script>
</body>

过滤器

定义:对要显示的数据进行特定格式化后再显示(适用于.些简单逻辑的处理)a

语法:

1.注册过滤器: Vue 。filter(name ,callback)或new Vue{filters:{}}

2.使用过滤器: {{ xxx|过滤器名}} 或v-bind:属性 = "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>

    </div>

    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;

        var vm = new Vue({
            el:"#root",
            data:{
                time:1621561377603, //时间戳
            },
            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:{
                timeFormater(value,str='YYYY-MM-DD HH:mm:ss'){
                    return dayjs(value).format(str)
                    
                },
                mySlice(value){
                    return value.slice(0,4)
                }
            }
        
        })
    </script>