computed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../js/vue.js"></script>
    <style>
 
    </style>

</head>
<body>
   
    <div id="root"></div>
     
    <script>  
        // computed  计算属性
       var app = Vue.createApp({    
            setup(){  
                const { ref, computed } = Vue
                const count = ref(0)
                const handleClick = () => {
                    count.value += 1
                }

                // const countAddFive = computed(()=>{
                //     return count.value + 5
                // })

                const countAddFive = computed({
                    get:() => {
                        return count.value + 5
                    },
                    set:(param)=>{
                        return count.value = param - 5
                    }
                })

                setTimeout(()=>{
                    countAddFive.value = 100
                },3000)

                return {
                    count,
                    handleClick,
                    countAddFive
                }
            },
            template:`  
                <div>
                   <span @click="handleClick">{{count}}</span> --- <span>{{countAddFive}}</span>
                </div>  
            `
        })
 
        app.mount('#root')

    </script>

</body>
</html>
posted @ 2021-12-14 10:35  13522679763-任国强  阅读(21)  评论(0)    收藏  举报