vue:vue的计算属性操作和缓存

最新推荐文章于 2023-03-28 15:29:10 发布

_阿锋丶

最新推荐文章于 2023-03-28 15:29:10 发布

阅读量665

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43342105/article/details/105221117

版权

vue 专栏收录该内容

44 篇文章 20 订阅

订阅专栏

什么是计算属性
在这里插入图片描述
计算属性的基本操作

    <div id="app">
        <h2>{{first+' '+last}}</h2>
        <h2>{{first}} {{last}}</h2>
        <h2>{{getTwo()}}</h2>

<!-- 计算属性 -->
        <h2>{{mergeTwo}}</h2>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                first:'one',
                last:'two'
            },
            // 计算属性
            computed:{
                // mergeTwo本质是一个属性
                mergeTwo:function(){
                    return this.first+' '+this.last
                }
            },
            methods: {
                getTwo(){
                    return this.first+' '+this.last
                }
            }
        });
    </script>

计算属性的get和set

<body>
    <div id="app">
        <h2>{{fullName}}</h2>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName:'zhangsan',
                lastName:'lisi'
            },
            computed: {
                // 属性对象 一般情况下只需要实现的是get方法,下面有更简洁的写法
                fullName: {
                    // set一般需要传参
                    set:function(newValue){
                        // console.fullName(newValue)

                        const name = newValue.split(' ')
                        this.firstName = name[0]
                        this.lastName = name[1]
                    },
                    get:function(){
                        return this.firstName + ' ' + this.lastName
                    }
                
                }

                // 所以可以简写成
                // fullName:function(){
                //     return this.firstName + ' ' + this.lastName
                // }

            },
            methods: {}
        });
    </script>