vue的计算属性

菜里都傻

已于 2024-01-07 00:26:05 修改

阅读量394

点赞数 7

分类专栏： vue 文章标签：前端 javascript vue

于 2024-01-07 00:23:11 首次发布

本文链接：https://blog.csdn.net/weixin_43894816/article/details/135434384

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

计算属性

计算属性就是通过vue的原有属性（data中的属性）计算得来的新属性（不需要在data中定义）
格式：

computed：{
    num:{
        get(){
            return xxx;
        },
        set(){

        }
    }
}

1、get方法在第一次访问计算属性时调用，之后都是在缓存中读取计算属性的值。当然，当与计算属性关联的vue原属性发生变化时还会再次调用get方法。
2、set在需要改变计算属性时调用，注意不能直接在set方法中改变计算属性，不然会发生递归。可以在set方法中修改vue原属性值，从而改变计算属性。
3、计算属性的简写形式：在不需要使用set方法时可以用简写形式

 num(){
        //get方法
        return xxx;
    }

代码实现：

<!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">
    <script src="vue.js"></script>
    <title>计算属性</title>
    <!-- 计算属性就是通过vue的原有属性（data中的属性）计算得来的新属性（不需要在data中定义）
    1、get方法在第一次访问计算属性时调用，之后都是在缓存中读取计算属性的值。当然，当与计算属性关联的vue原属性发生变化时还会再次调用get方法。
    2、set在需要改变计算属性时调用，注意不能直接在set方法中改变计算属性，不然会发生递归。可以在set方法中修改vue原属性值，从而改变计算属性。
    3、计算属性的简写形式：在不需要使用set方法时可以用简写形式
    num(){
        return xxx;
    }

    格式：
    computed：{
        num:{
            get(){
                return xxx;
            },
            set(){

            }
        }
    } -->
</head>
<body>
    <div id="app">
       msg: {{msg}} <input type="text" v-model="msg"></input><br>
       num:{{num}}
    </div>
    
    <script>
        const vm=new Vue({
            el: "#app",
            data:{
                msg:"计算属性"
            },
            computed:{
                // num:{
                //     get(){
                //         console.info("get方法调用了");
                //         return this.msg.split('').reverse().join('');
                //     },
                //     //基本不用
                //     set(val){
                        
                //     }
                // }
                num(){
                    console.info("get方法倍调用了");
                    return this.msg.split('').reverse().join('');
                }
            }
        })
    </script>
</body>
</html>