vue-computed属性

最新推荐文章于 2024-05-18 20:32:59 发布

kaka_d

最新推荐文章于 2024-05-18 20:32:59 发布

阅读量63

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/kaka_d/article/details/112724514

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客探讨了Vue.js中computed属性和方法的使用，展示了它们在计算总价格场景下的应用。通过示例代码，说明了computed属性如何进行缓存以提高性能，并指出在处理动态计算时，computed属性相比方法具有更高的效率。

摘要由CSDN通过智能技术生成

1.computed计算属性
简单用法：

<body>
        <script src="vue.js"></script>
    
        <div id="app">
            <h2>{{firstName+' '+lastName}}</h2>
            <h2>{{firstName}} {{lastName}}</h2>
            <h2>{{getFullName()}}</h2>
            <h2>{{fullName}}</h2>
        </div>
    
        <script>
        const app = new Vue({
            el:'#app',
            data:{
               firstName:'Lebron',
               lastName:'James'
            },
            //computed计算属性
            computed:{
                fullName:function(){
                    return this.firstName+' '+this.lastName
                }
            },
            methods:{
                getFullName(){
                    return this.firstName+' '+this.lastName
                }
            }
        })
        </script>
</body>

进阶用法:

<script src="vue.js"></script>
        <div id="app">
            <h2>总价格：{{totalPrice}}</h2>
        </div>
<script>
        const app = new Vue({
            el:'#app',
            data:{
                books:[
                 {id:110,name:'unix编程艺术',price:119},
                 {id:111,name:'代码大全',price:105},
                 {id:112,name:'深入理解计算机原理',price:98},
                 {id:113,name:'现代操作系统',price:87},
                ]
            },
            //computed计算属性
            computed:{
                totalPrice: function() {
                    let result = 0
                    /*for(let i=0;i < this.books.length;i++)
                    {
                        result += this.books[i].price
                    }
                    return result*/
                    //这两个相等
                    for(let i in this.books){
                         result += this.books[i].price
                    }
                    return result 
                   
                }
            }
        })
</script>