Vue监听对象3种写法

花开富贵城

于 2024-09-05 14:19:54 发布

阅读量414

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42498352/article/details/141929851

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="box">
        <select v-model="form.year" >
            <option value="2023">2023</option>
            <option value="2024">2024</option>
        </select>
        <select v-model="form.month" >
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
        <select v-model="form.day" >
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
    </div>
    <script>
        var obj={
            data(){
                return{
                    form:{
                        year:'2024',
                        month:'9',
                        day:'5'
                    }
                }
            },
            watch:{
                // （1）
                // "form.year":function(value){
                //     console.log(value)
                // },
                // "form.month":function(value){
                //     console.log(value)
                // },
                // "form.day":function(value){
                //     console.log(value)
                // }


                // （2）简写
                // "form.year":"anyfunc",
                // "form.month":"anyfunc",
                // "form.day":"anyfunc"

                // （3）
                form:{
                    handler(value){
                        console.log(value)
                    },
                    deep: true, // 复杂对象进行深度监听
                    immediate: true, // 监听之后立即触发一次
                }

            },
            methods: {
                // （2）简写
                anyfunc(value, oldvalue){
                    console.log(value,'any')
                }
            },
        }

        Vue.createApp(obj).mount('#box')

    </script>
</body>
</html>