Vue核心基础5：数据监测、收集表单数据、过滤器

最新推荐文章于 2024-05-31 11:41:47 发布

是小蟹呀^

最新推荐文章于 2024-05-31 11:41:47 发布

阅读量583

点赞数 4

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

本文链接：https://blog.csdn.net/m0_61495539/article/details/136101819

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1 数据监测

【代码】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>总结</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>学生信息</h2>
        <!-- 添加按钮，实现功能 -->
        <button @click="student.age++">年龄+1</button>
        <button @click="addSex">添加性别属性，默认值为男</button>
        <button @click="updateSex">修改性别</button>
        <button @click="addFriend">在朋友列表首位添加一个朋友</button>
        <button @click="updatefirstF">修改第一个朋友的名字为：小章</button>
        <button @click="addHobby">添加一个爱好</button>
        <button @click="updatefirstHobby">修改第一个爱好为：吃饭</button>



        <h3>姓名：{{student.name}} ---- 年龄：{{student.age}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        <h3>朋友</h3>
        <ul>
            <li v-for="(fr,index) in student.friends" :key="index">姓名：{{fr.name}} -----
                年龄：{{fr.age}}
            </li>
        </ul>

        <h3>爱好</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
        </ul>
    </div>
    <script>
        // 实现后添加的数据也能有响应式的功能
        const vm = new Vue({
            el: '#root',
            data: {
                name: 'Vue',
                address: '北京',
                student: {
                    name: '张三',
                    age: 18,
                    hobby: ['学习', '喝酒', '烫头'],
                    friends: [
                        { name: '李四', age: 32 },
                        { name: '王五', age: 29 }
                    ]
                }
            },
            methods: {
                addSex() {
                    // 方法1：
                    // vm.$set(vm.student, 'sex', '男')

                    // 方法2：
                    Vue.set(this.student, 'sex', '男')
                },
                updateSex() {
                    this.student.sex = '女'
                },
                addFriend() {
                    this.student.friends.unshift({ name: '赵六', age: 30 })
                },
                updatefirstF() {
                    this.student.friends[0].name = '小章'
                },
                addHobby() {
                    this.student.hobby.unshift('看片')
                },
                updatefirstHobby() {
                    this.student.hobby.splice(0, 1, '吃饭')
                    // Vue.set(this.student.hobby, 0, '吃饭')
                }

            },
        })
    </script>
</body>

</html>

总结：

2 收集表单数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收集表单数据</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <form action="" @submit.prevent="submit">
            <!-- 也可以直接放入label标签中 -->
            <!-- <label>密码：
                <input type="password">
            </label> -->

            <!-- 修饰符  trim, number, lazy -->
            <!-- v-model.trim  去掉前后空格 -->
            <label for="userName">账号：</label>
            <input type="text" id="userName" v-model.trim="userInfo.account"><br>
            <label for="passWord">密码：</label>
            <input type="password" id="passWord" v-model.trim="userInfo.password"><br>

            性别：
            <input type="radio" name="sex" checked v-model="userInfo.sex" value="男">男
            <input type="radio" name="sex" v-model="userInfo.sex" value="女">女<br>

            年龄：
            <input type="number" v-model.number="userInfo.age"><br>
            <!-- v-model.number 将写的内容收集成数字类型 -->

            爱好：
            学习<input type="checkbox" name="" v-model="userInfo.hobby" value="学习">
            吃饭<input type="checkbox" name="" v-model="userInfo.hobby" value="吃饭">
            睡觉<input type="checkbox" name="" v-model="userInfo.hobby" value="睡觉"><br>

            所属校区:
            <select v-model="userInfo.city">
                <option value="">请选择</option>
                <option value="bj">北京</option>
                <option value="nj">南京</option>
                <option value="sh">上海</option>
                <option value="sz">苏州</option>
            </select>
            <br><br>

            其它信息：<br>
            <!-- 不希望实时收集  v-model.lazy -->
            <textarea name="" id="" cols="30" rows="10" v-model.lazy="userInfo.other">
            </textarea>
            <br><br>

            <input type="checkbox" name="" id="" v-model="userInfo.agreement">
            阅读并接受用户协议<a href="http://www.baidu.com">用户协议</a>
            <br><br><br>

            <button>提交</button>

        </form>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                userInfo: {
                    account: '',
                    password: '',
                    sex: '',
                    hobby: [],
                    city: '',
                    other: '',
                    agreement: '',
                    age: ''
                }

            },
            methods: {
                submit() {
                    console.log(JSON.stringify(this.userInfo))
                }
            },
        })
    </script>
</body>

</html>

总结：

3 过滤器

【代码】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script src="../js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
</head>

<body>
    <div id="root">
        <h2>显示格式化后的当前时间</h2>
        <!-- 1. 计算属性实现 -->
        <h3>{{forTime}}</h3>

        <!-- 2. methods实现 -->
        <h3>{{getTime()}}</h3>

        <!-- 3.过滤器实现 -->
        <h3>{{time | formatTime}}</h3>

        <!-- 过滤器传参 -->
        <h3>{{time | formatTime('YYYY-MM-DD')}}</h3>

        <!-- 截取 多个过滤器的串联-->
        <h3>{{time | formatTime('YYYY-MM-DD') | mySlice}}</h3>

    </div>
    <script>
        // 配置全局的过滤器
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 4)
        })
        

        const vm = new Vue({
            el: '#root',
            data: {
                time: 1707209007850
            },
            computed: {
                forTime() {
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            methods: {
                getTime() {
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },

            // 局部过滤器
            filters: {
                formatTime(time, str = 'YYYY-MM-DD HH:mm:ss') {

                    return dayjs(time).format(str)
                },
                mySlice(value) {
                    return value.slice(0, 4)
                }
            }
        })
    </script>
</body>

</html>

总结：