收集表单数据 from

最新推荐文章于 2024-07-23 14:51:29 发布

qq_40051569

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量100

点赞数

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

本文链接：https://blog.csdn.net/qq_40051569/article/details/129400688

版权

前端 vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

收集表单数据 from

在这里插入图片描述

<div id="app">
        <!-- submit.prevent阻止默认行为，跳转 -->
        <form @submit.prevent="submit">
            <!-- v-model.trim 去除前后空格 -->
            账号：<input type="text" id="demo" v-model.trim="sum.account"><br/><br/>
            密码：<input type="password" v-model="sum.passWord"><br/><br/>
            <!-- model.number 收集数值 -->
            年龄：<input type="number" v-model.number="sum.age"><br/><br/>
            性别：
            男：<input type="radio" name="sex"v-model="sum.sex" value="male">
            女：<input type="radio" name="sex"v-model="sum.sex" value="flmale"><br/><br/>
            爱好：
            <!-- 多选框没有value，默认收集checked 而且接受的值要用数组-->
            学习 <input type="checkbox"v-model="sum.hobby" value="study">
            打游戏<input type="checkbox"v-model="sum.hobby" value="gamy">
            吃饭<input type="checkbox"v-model="sum.hobby" value="ead"><br/><br/>
            所属小区
            <select v-model="sum.city">
                <option value="">请选择小区</option>
                <option value="beij">北京</option>
                <option value="dal">大连</option>
                <option value="gjz">甘井子</option>
                <option value="jinz">金州</option>
            </select><br/><br/>
            其他信息
            <!-- model.lazy 失去鼠标交点，收集数据 -->
            <textarea v-model.lazy="sum.other"></textarea><br/>
            <input type="checkbox" v-model="sum.agee">接受协议 <a href="https://www.baidu.com/">《协议》</a><br/><br/>
            <button>提交</button>
        </form>
    </div>
    <script type="text/javascript" >
        new Vue({
            el:'#app',
            data:{
                sum:{
                    account:'',
                    passWord:'',
                    sex:'',
                    age:18,
                    hobby:[],
                    city:'beij',
                    other:'',
                    agee:''
                },
                
            },
            methods: {
                submit(){
                    console.log(JSON.stringify(this.sum))
                }
            },
        })
    </script>

过滤器

<div id="app">
        <!-- 计算属性和，methosd实现，是一样的 -->
        <h2>{{fmtTime}}</h2>
        <!-- 过滤器实现 -->
        <h3>{{tims|timeFormater}}</h3>
        <!-- 传值 tims 和 YYYY_MM_DD  方法是 1值给方法2，2值给方法3，调用-->
        <h3>{{tims|timeFormater('YYYY_MM_DD') | myS}}</h3>
        <h3 :x="msg | myS">尚硅谷</h3>
        <!-- 过滤器的两种用法，一种是插值语法{{}} 一种是v-birng -->
    </div>
    <script type="text/javascript" >
        // 全局的过滤器
        Vue.filter('myS',function(val){
            return val.slice(0,4)
        })
        new Vue({
            el:'#app',
            data:{
                tims:1675232697,
                msg:'wozhenshiniua '
            },
            methods: {
            },
            computed:{
                fmtTime(){
                    return dayjs(this.tims).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            filters:{
                // str 没有值用默认
                timeFormater(val,str='YYYY-MM-DD HH:mm:ss'){
                    
                    return dayjs(val).format(str)
                }
            }
        })
    </script>