第三章 计算属性

编辑本文章

3.1 什么是计算属性

计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1 什么是计算属性</title>
</head>
<body>
<div id="app">
    {{ reversedText }}
</div>
<script src="../vue.min.js"></script>

<script type="application/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            text:"123,456"
        },
        computed:{
            reversedText:function () {
                //这里的this指向的是当前的Vue实例
                return this.text.split(',').reverse().join(',');
            }
        }
    })
</script>
</body>
</html>
View Code

3.2 计算属性用法

计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。每个计算属性都有getter和setter属性，默认是getter来读取数据。

计算属性可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.2 计算属性用法</title>
</head>
<body>
<script src="../vue.min.js"></script>
<div id="app">
    总价：{{prices}}
</div>
<script type="application/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            package1:[
                {
                    name:"iphone",
                    price:1238,
                    count:2
                },
                {
                    name:"XiaoMi",
                    price:3200,
                    count:3
                }
                ],
            package2:[
                {
                    name:"apple",
                    price:3,
                    count:5
                },
                {
                    name:"banana",
                    price:2,
                    count:10
                }
            ]
        },
        computed:{
            prices:function () {
                var prices=0;
                for(var i =0;i<this.package1.length;i++){
                    prices+=this.package1[i].price*this.package1[i].count;
                }
                for (var i=0;i<this.package2.length;i++){
                    prices+=this.package2[i].price*this.package2[i].count;
                }
                return prices;
            }
        }
    })
</script>
</body>
</html>
View Code

当package1或package2中的商品有任何变化，计算属性prices就会自动更新，视图中的总价也会自动变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性方法</title>
</head>
<body>
<script src="../vue.min.js"></script>
<div id="app">
    姓名：{{ fullName }}
</div>
<script type="application/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            firstName:"Jack",
            lastName:"Green"
        },
        computed:{
            fullName:{
                //getter方法读取数据
                get:function () {
                    return this.firstName+" "+this.lastName;
                },
                //setter方法设置数据
                set:function (newValue) {
                    var names=newValue.split(" ");
                    this.firstName=names[0];
                    this.lastName=names[names.length - 1];
                }
            }
        }
    })
</script>
</body>
</html>
View Code

 

　　计算属性除了简单文本插值外，经常用于动态设置元素样式名称和内联样式，同时也经常用来动态传递props

技巧：计算属性可以依赖其他计算属性，也可以依赖其他vue实例数据，被依赖数据变化时依赖属性将同时变化。

3.3 计算属性缓存

　　计算属性也可以用方法来替代，只是方法后面有一对括号()。但是计算属性是基于他的依赖缓存的，只有被依赖数据发生变化，他才会重新取值。

 

posted @ 2019-04-28 10:18  丫丫625202  阅读(141)  评论(0)  编辑  收藏  举报