Vue之收集表单数据与过滤器

1.表单大全：

v-model.trim="account"：去除空格，

年龄：
<input type="number" v-model.number="age"><br>：输入数字和接收数字

<textarea v-model.lazy="other"></textarea>:失去焦点再接受数据（适用于大输入框）

<div id="root">
    <form @submit.prevent="demo">
<!--        获取焦点事件，只要点击账号：就会到绑定的输入框-->
        <label for="demo">账号：</label>
        <input type="text" id="demo" v-model.trim="account"><br>
        <label for="password">密码：</label>
        <input type="text" id="password" v-model="password"><br>
        <br>
        年龄：
        <input type="number" v-model.number="age"><br>

        sex：
        男<input type="radio" name="sex" value="male">
        女<input type="radio" name="sex" value="female">
        <br>
        爱好：
        学习<input type="checkbox" v-model="hobby" value="study">
        游戏<input type="checkbox" v-model="hobby" value="game">
        吃饭<input type="checkbox" v-model="hobby" value="eat">
        <br>
        所属校区：
        <select v-model="city">
            <option value="">请选择</option>
            <option value="bj">北京</option>
            <option value="sx">陕西</option>
            <option value="sh">上海</option>
        </select>
        <br>
        其他信息：
        <textarea v-model="other"></textarea>
        <br>
        <input type="checkbox" v-model="agree">阅读并同意协议
        <br>
        <button>提交</button>
    </form>

</div>

<script>
    new Vue({
        el:'#root',
        data:{
            account:'',
            password:'',
            sex:"",
            age:"",
            hobby:[],
            city:"",
            other:"",
            agree:'',


        },
        methods:{
            demo(){
                console.log(JSON.stringify(this._data))
            }
        }
    })

</script>

总结：

 二：过滤器：

        Vue.js 允许你自定义过滤器(filter)，可被用于一些常见的文本格式化。

        过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)

        将时间搓改成时间格式：

        引入了第三方库：bookcdn中的dayjs库，

dayjs链接：

    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.4/dayjs.min.js"></script>

<div id="root">
    <h1>显示时间</h1>
<!--    通过计算属性-->
    <h3>{{atime}}</h3>
<!--    通过过滤器-->
    <h2>{{time | timeformater}}</h2>
</div>

<script>
//    配置全局过滤器
    Vue.filter('timeformater',function(value) {
        return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')
    })
    new Vue({
        el:'#root',
        data:{
            time:1621561377603
        },
        computed:{
            atime(){
                return dayjs().format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        //局部过滤器
        filters:{
            timeformater(value){
                return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')

            }
        }


    })
</script>

总结：

dayjs

Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js