Vue的计算属性

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

禁止喧哗

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

阅读量410

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_41555595/article/details/105350620

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue的计算属性

1.计算属性演示

定义：

用于对data中属性的值进行运算

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Complute</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2>{{lastName + firstName}}</h2>
    <h2>{{lastName}}{{firstName}}</h2>
    <h2>{{getFullName()}}</h2>

    <!--计算属性的方法，不用加括号-->
    <h2>{{fullName}}</h2>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: '三',
        lastName: '张',
      },
      computed: {
        //规范：这里起的名字按照属性的名字的形式来,而且名字要唯一，不能有相同的，包括methods里的方法名
        //他的本质就是一个属性
        fullName: function () {
          return this.lastName + this.firstName;
        }

      },
      methods: {
        getFullName: function () {
          return this.lastName + this.firstName;
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述
复杂案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>平均年龄:{{averageAge}}</h1>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        persons: [{name: '张三', age: 18},
          {name: '李四', age: 28}
        ]
      },
      computed: {
        averageAge: function () {
          let sumAge = 0;
          for (let person of this.persons){
            sumAge += person.age;
          }
          return sumAge / this.persons.length;
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

小结:
1.计算属性较之methods的效果会更好一点，因为它是由缓存的可以直接调用，methods是每次都要执行的。
2.computed和mothods里面的方法名不能相同，都要唯一。

2.计算属性的getter和setter

计算属性是一个对象,对象里面有getter和setter方法
其实上面的计算属性的写法只是简写的的一种方式，真正的写法其实是一个对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GetterAndSetter</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
<!--        默认调用getter方法-->
        <h2>{{fullName}}</h2>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: '三',
                lastName: '张'
            },
            computed: {
                //这种方法形式定义的计算属性属性，其实他只是一种简写,他默认是fullName对象里面的getter方法
                //也就是说fullName对象里面只有getter方法
                /*fullName: function ()(
                    return this.lastName + this.firstName;
                )*/
                //真正的写法其实是对象的形式去定义
                fullName: {
                    get: function () {
                        return this.lastName + this.firstName;
                    },
                    //一般这里不写,我们不希望别人修改,当这里没有setter方法是叫只读属性
                    //如果这里有setter,就必须有一个newValue参数
                    //fullName这个属性修改了就会调用setter
                    set: function (newValue) {
                        //这里设置了就会调用setter方法了
                        //如果需要保存,需要拆分newValue保存到firstNmae和lastName
                        console.log('newValue:' + newValue);
                    }
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

3.计算属性的缓存

计算属性是由缓存的，多次调用只会执行一次，而methods是没有缓存的，会被执行多次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Computed Cache</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>直接拼接: {{lastName}} + {{firstName}} (一半不用，太繁琐了)</h2>
        <br/>
        <h2>调用methods1:{{finalName()}}</h2>
        <h2>调用methods2:{{finalName()}}</h2>
        <h2>调用methods3:{{finalName()}}</h2>
        <h2>调用methods4:{{finalName()}}</h2>
        <br/>
        <h2>计算属性1:{{fullName}}</h2>
        <h2>计算属性2:{{fullName}}</h2>
        <h2>计算属性3:{{fullName}}</h2>
        <h2>计算属性4:{{fullName}}</h2>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: '三',
                lastName: '张'
            },
            computed: {
              fullName: function () {
                  console.log('fullName计算属性被调用了');
                  return this.lastName + this.firstName;
              }
            },
            methods: {
                finalName: function (){
                    console.log('finalName方法被调用了');
                    return this.lastName + this.firstName;
                }
            }
        })
    </script>

</body>
</html>

在这里插入图片描述
如以上code如果firstName和lastName不变是不会调用计算属性，当它们改变了才会调用。

禁止喧哗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的计算属性

计算属性定义：用于对data中属性的值惊醒运算<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Complute</title> <script type="text/javascript" src="../js/...
复制链接

扫一扫