计算属性computed的使用

最新推荐文章于 2023-08-04 18:30:00 发布

Doe

最新推荐文章于 2023-08-04 18:30:00 发布

阅读量7.5k

点赞数 4

分类专栏： # Vue 文章标签： vue.js computed methods 计算属性

本文链接：https://blog.csdn.net/weixin_43613849/article/details/117398800

版权

Vue 专栏收录该内容

48 篇文章 3 订阅

订阅专栏

1、计算属性的基本使用

我们知道，在模板中可以直接通过插值语法显示一些data中的数据。

但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示比如我们有firstName和lastName两个变量，我们需要显示完整的名称。

但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}

我们可以将上面的代码换成计算属性：我们发现计算属性是写在实例的computed选项中的。

computed计算属性，本质是属性，不是函数，所以调用的时候是fullname不是fullname()

代码如下：

  <div id="app">
    <h2>{{firstname + ' '+lastname}}</h2>
    <h2>{{firstname}} {{lastname}}</h2>
    <h2>{{getfullname()}}</h2>
    <h2>{{fullname}}</h2>

  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstname: 'Doe',
        lastname: 'John'
      },
      //computed计算属性，本质是属性，不是函数，所以调用的时候是fullname不是fullname()
      computed: {
        fullname: function () {
          return this.firstname + ' ' + this.lastname;
        }
      },
      methods: {
        getfullname: function () {
          return this.firstname + ' ' + this.lastname;
        }
      }
    })
  </script>

2、计算属性的复杂操作

计算属性中也可以进行一些更加复杂的操作，比如下面的例子：求书的总价格

代码

  <div id="app">
    <h2>总价格:{{totalPrise}}</h2>
  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        books: [
          { id: 01, name: 'Java编程思想1', price: 80 },
          { id: 02, name: 'Java编程思想2', price: 90 },
          { id: 03, name: 'Java编程思想3', price: 100 },
          { id: 04, name: '代码大全', price: 50 },
        ]
      },
      //computed计算属性，本质是属性，不是函数，所以调用的时候是fullname不是fullname()
      computed: {
        totalPrise: function () {
          let result = 0;
          for (let book of this.books) {
            result += book.price;
          }
          return result;
        }
      }
    })
  </script>

结果如下：

3、计算属性的setter和getter

每个计算属性都包含一个getter和一个setter 在上面的例子中，我们只是使用getter来读取。

在某些情况下，你也可以提供一个setter方法（不常用）。

在需要写setter的时候，代码如下：

代码如下：

  <div id="app">
    <h2>{{fullname}}</h2>
    <h2>{{fullName}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstname: 'Doe',
        lastname: 'John'
      },
      computed: {
        fullname: function () {
          return this.firstname + ' ' + this.lastname;
        },
        fullName: {
          set: function (newvalue) {
            console.log("调用了fullName的set");
            console.log(newvalue);
            let newname = newvalue.split(' ');
            this.firstname = newname[0];
            this.lastname = newname[1];
          },
          get: function () {
            console.log("调用了fullName的get")
            return this.firstname + ' ' + this.lastname;
          }
        }
      }
    })
  </script>

一般取值都是get，可以调用set方法如下：

4、计算属性和methods对比

我们可能会考虑这样的一个问题： methods和computed看起来都可以实现我们的功能，那么为什么还要多一个计算属性这个东西呢？

原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

可以看出调用三次时，computed只调用了一次，而methods需要调用三次

代码：

<body>
  <div id="app">
    <!-- 直接拼接-->
    <h2>{{firstname}} {{lastname}}</h2>
    <!-- 通过定义computed-->
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <!-- 通过定义methods-->
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstname: 'Doe',
        lastname: 'John'
      },
      computed: {
        fullName: {
          set: function (newvalue) {
            let newname = newvalue.split(' ');
            this.firstname = newname[0];
            this.lastname = newname[1];
          },
          get: function () {
            console.log("调用了computed")
            return this.firstname + ' ' + this.lastname;
          }
        }
      },
      methods: {
        getFullName: function () {
          console.log("调用methods")
          return this.firstname + ' ' + this.lastname;
        }
      }
    })
  </script>
</body>

参考链接:

https://www.bilibili.com/video/BV1H7411j7Mc

Doe

关注

4
点赞
踩
15

收藏

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

1、计算属性的基本使用我们知道，在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示比如我们有firstName和lastName两个变量，我们需要显示完整的名称。但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}} 我们可以将上面的代码换成计算属性：我们发现计算属性是写在实例的computed选项中的。computed计算属性，
复制链接

扫一扫