Vue基础(四)

最新推荐文章于 2024-06-25 21:40:27 发布

夜刀神十三香

最新推荐文章于 2024-06-25 21:40:27 发布

阅读量85

点赞数

分类专栏：记录学习笔记笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_44990139/article/details/95497655

版权

学习笔记同时被 3 个专栏收录

65 篇文章 0 订阅

订阅专栏

笔记

65 篇文章 0 订阅

订阅专栏

记录

64 篇文章 0 订阅

订阅专栏

计算属性

computed: 计算属性(方法)

<body>
    <div id="app">
        {{reveredText}}
        {{prives}}
    </div>

    <script>
    const app=new Vue({
        el:"#app",
        data:{
            text:"abc,123,qwe,789",
            package1:[
                {proce:5000,count:5},
                {proce:2600,count:2},
                {proce:1000,count:4},
                {proce:4100,count:3}
            ],
            package2:[
                {proce:100,count:3},
                {proce:600,count:5},
                {proce:2300,count:6},
                {proce:410,count:4}
            ]
        },
        computed: {
        	console.log("--方法--")
            reveredText:function(){
                //这里的this指向的是当前Vue实例
                
            },
            prives:function(){
            console.log("--方法--")
            let prives =0;
            //四种循环方式
            for(let i=0;i<this.package1.length;i++){
                //prives+=this.package1[i].proce*this.package1[i].count;
            }
            for(let item of this.package2){
                //prives+=item.proce*item.count
            }
            this.package2.forEach(function(item,index){
                //prives+=item.proce*item.count
            })
            this.package1.forEach(item=>{
                prives+=item.proce*item.count
            })

            return prives;
            }
        }
    
    })    
    
    </script>
</body>

只要其中任意一个数据变化,计算属性都会被重新执行,例如在控制台修改上面代码的proce的值,每修改一次,函数都会重新执行一次,但是如果两次修改的值相同,函数不会重新执行.
计算属性缓存:当实例中已经存在计数属性,下次再使用将直接使用缓存中的数据
每一个计算属性都有一个geter和seter方法