我想知道为什么我的代码不能监测提示信息

我想知道为什么我的代码不能监测提示信息

//当数据发生改变时,对名称和年龄进行数据比对,当年龄》=25,是青年;《25:少年;姓名必须是张三,否则提示名字不一样,不能改

        const app = Vue.createApp({

            data() {

                return {

                    name: '张三',

                    age: 18

                }

            },

            //专门用于name和age的校验条件以及返回方法

            jy: {

                age: {

                    ages: this.age,

                    //用来限定年龄范围

                    jyAge(newAge = 16) {

                        return newAge >= 25;

                    },

                    //大于等于25,调用这个方法的提示

                    msg1(newMsg = "这个是默认提示,年纪大了") {

                        return newMsg;

                    },

                    //小于25,调用这个方法的提示

                    msg2(newMsg = "这个是默认提示,太小了") {

                        return newMsg;

                    },

                }

            },

            template:

                `

            <p> {{name}} </p>

            <p> {{age}} </p>

            `

        });

        app.mixin({

            created() {

                const ageJy = this.$options.jy;

                let ages = this.$data.age;

                for (const key in ageJy.age) {

                    this.$watch(key, function (value) {

                        console.log(value);

                        console.log(key);

                        if (ageJy.age.jyAge(value)) {

                            console.log(ageJy.age.msg1('aa'));

                        } else {

                            console.log(ageJy.age.msg2('bb'));

                        }

                    });

                }

            }

        })

        var vm = app.mount('#all');


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕久久 2022-09-21 11:40:33

同学你好,代码有如下问题:

1、需要注意:同学的代码中,根组件对应的id是all,要检查html结构:

https://img1.sycdn.imooc.com//climg/632a874a09ce2b0606480206.jpg

2、data中的数据是age,不是ages,所以jy中要定义age:

https://img1.sycdn.imooc.com//climg/632a87860938b09a05730169.jpg

修改后,可以监测到数据改变:

https://img1.sycdn.imooc.com//climg/632a87a409bb069105740415.jpg

https://img1.sycdn.imooc.com//climg/632a87ab09c5ce7306960131.jpg

祝学习愉快!

  • 提问者 贼亮 #1

    请问,为什么要保证data中的age与自定义属性中的age保持一致呢,这个有什么联系吗

    2022-09-21 13:04:21
  • 好帮手慕久久 回复 提问者 贼亮 #2

    解答如下:

    vm.$data.age=xxx改变的是data中定义的数据,如果$watch方法没有监听data中的数据,那么改变data中数据时,代码是无法感知到的。反过来理解,$watch方法监听了data中的数据后,我们通过vm.$data.age=xxx改变data中的数据,才会被感知到。所以这里要将age统一。

    2022-09-21 13:10:05
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师