05-Vue的Computed(计算属性)

最新推荐文章于 2023-12-04 13:59:57 发布

蓝带915

最新推荐文章于 2023-12-04 13:59:57 发布

阅读量124

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42647711/article/details/104584590

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

计算属性的基本使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <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: "Lebron",
          lastName: "James"
        },
        computed: {
          fullName: function() {
            return this.firstName + " " + this.lastName
          }
        },
        methods: {
          getFullName() {
            return this.firstName + " " + this.lastName
          }
        }
      })
    </script>
  </body>
</html>

1.快速理解

计算属性可以理解成是一种加强版的data变量，它可以对data中变量做出更改或者合并，而使用时只需像使用data变量一样用mustache语法即可，注意使用时不要加括号。

计算属性的复杂操作

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h2>总价格：{{totalPrice}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <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: {
          totalPrice: function() {
            let result = 0
            for (let book of this.books) {
              result += book.price
            }
            return result
          }
        }
      })
    </script>
  </body>
</html>

1.进阶操作

这节讲的是对data变量的高级操作，比如filter()，map()，reduce()等一些函数方法的运作。尤其是ES6语法的强大和便捷大家都知道，现在越来越受人欢迎。

2.computed和methods的区别

methods相信大家都不陌生，可以将点击事件、变量操作等等封装成一个方法，但是如果这里的操作只是变量合并，比如以上代码只是求和，我们就不必封装方法而是用computed。

计算属性的setter和getter

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

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

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          firstName: "Kobe",
          lastName: "Bryant"
        },
        computed: {
          fullName: {
            set: function(newValue) {
              const names = newValue.split(" ")
              this.firstName = names[0]
              this.lastName = names[1]
              console.log(newValue + "修改成功")
            },
            get: function() {
              return this.firstName + " " + this.lastName
            }
          }
        }
      })
    </script>
  </body>
</html>