计算属性与方法的区别

最新推荐文章于 2024-03-18 08:20:54 发布

东海029

最新推荐文章于 2024-03-18 08:20:54 发布

阅读量800

点赞数

分类专栏： vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/dongzh029/article/details/120279597

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

计算属性与方法的区别：
1、方法调用的时候需要加括号，计算属性调用时不需要；
2、方法的结果无缓存，计算属性结果有缓存，只有当数据有变化时才会被调用

<html>
    <head>
        <script src='vue.js'></script>
    </head>
    <body>
        <div id = 'app'>
            <span>原始值：{{message}}</span>
            <br><hr><Br>
            <!-- 实现字符串的反转 -->
            <span>原始方法：{{message.split(' ').reverse().join('-')}}</span>
            <br><hr><Br>
            <!-- 用方法实现字符串的翻转 -->
            <span>用方法实现：{{message_fanzhuan()}}</span>
            <br><hr><Br>
            <!-- 用计算属性实现字符串的反转 -->
            <span>用计算属性实现：{{fanzhuan_message}}</span>
        </div>

        <script>
            const vm = new Vue({
                el:'#app',
                data:{
                    message:'陕西省 西安市 雁塔区 小寨街道办 小寨商城'

                },
                methods:{
                    // 通过入参获取到input输入的内容，再给到message，实现数据的双向绑定
                    message_fanzhuan(){
                        return this.message.split(' ').reverse().join('-')
                    }
                },
                computed:{
                    fanzhuan_message(){
                        return this.message.split(' ').reverse().join('-')
                    }
                }
            
            })
        // 计算属性与方法的区别：
        // 1、方法调用的时候需要加括号，计算属性调用时不需要；
        // 2、方法的结果无缓存，计算属性结果有缓存，只有当数据有变化时才会被调用
        </script>

    </body>
</html>

东海029

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
计算属性与方法的区别

计算属性与方法的区别：1、方法调用的时候需要加括号，计算属性调用时不需要；2、方法的结果无缓存，计算属性结果有缓存，只有当数据有变化时才会被调用<html> <head> <script src='vue.js'></script> </head> <body> <div id = 'app'> <span>原始值：{{mess
复制链接

扫一扫