Vue.js-computed计算属性

1.1 computed作用

但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。

减少运算次数, 缓存运算结果. 运用于重复相同的计算。

1.2 计算属性基本使用

计算属性是写在实例的computed选项中的。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性的基本使用</title>
</head>
<body>
<!--2.定义一个div元素-->
    <div id="app">
      <h3>{{fullName}}</h3>

      <h3>{{getFullName()}}</h3>
    </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.3 计算属性复杂使用

计算属性中也可以进行一些更加复杂的操作

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性的复杂使用</title>
</head>
<body>
<!--2.定义一个div元素-->
    <div id="app">
      <h3>总价格:{{totalPrice}}</h3>
    </div>

    <script src="js/vue.js"></script>
    <script>
      // 创建对象
      const app = new Vue({
        // 挂载要管理的元素
        el: '#app',

        // 定义数据
        data: {
          books: [
            {id: 100, name:'Unix编程艺术', price: 119},
            {id: 111, name: '代码大全', price: 105},
            {id: 112, name: '深入理解计算机原理', price: 98},
            {id: 113, name: '现代操作系统', price: 87},
          ]
        },

        computed: {
          totalPrice: function () {
            // 定义result值
            let result = 0;
            /*for(let i=0; i < this.books.length; i++){
              result += this.books[i].price
            }*/

            // es6写法
            for (let i in this.books) {
                 result += this.books[i].price;
               }

            // 返回结果值
            return result;
          }
        }
      })
  </script>
</body>
</html>

执行结果
​

1.4 计算属性setter和getter

注意: 计算属性一般是没有set方法的，只读属性。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性的setter和getter</title>
</head>
<body>
  <!--2.定义一个div元素-->
      <div id="app">
       <h3>{{fullName}}</h3>
      </div>

      <script src="js/vue.js"></script>
      <script>
        // 创建对象
        const app = new Vue({
          // 挂载要管理的元素
          el: '#app',

          // 定义数据
          data: {
            firstName: 'kobe',
            lastName: 'Bryant'
          },

          // 计算属性
          computed: {
            // get和set方法
            fullName: {
             /* set: function (newValue) {
                 const names = newValue.split(' ');
                 this.firstName = names[0];
                 this.lastName = names[1];
              },*/

              get: function () {
                return this.firstName +' ' +  this.lastName
              }
            },
          }
        })
    </script>
</body>
</html>

执行结果

​

1.5 计算属性和methods的比较

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性和methods的比较</title>
</head>
<body>
<!--2.定义一个div元素-->
    <div id="app">
     <!--直接拼接-->
      <h2>{{firstName}} {{lastName}}</h2>
      <!--2.通过定义methods-->
      <h2>{{getFullName()}}</h2>

      <!--3.通过computed-->
      <h2>{{fullName}}</h2>
    </div>

    <script src="js/vue.js"></script>
    <script>
      // 创建对象
      const app = new Vue({
        // 挂载要管理的元素
        el: '#app',

        // 定义数据
        data: {
          firstName: 'kobe',
          lastName: 'Bryant'
        },

        // 函数
        methods: {
          getFullName: function () {
            console.log('fullName');
            // 返回值
            return this.firstName + ' ' + this.lastName;
          }
        },

        // 计算属性
        computed: {
          fullName: function () {
            console.log('fullName');
            return this.firstName + ' ' + this.lastName
          }
        }

      })
  </script>
</body>
</html>

执行结果
​

1.6 computed小结

定义函数也可以实现与 计算属性相同的效果,都可以简化运算。

不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

posted @ 2021-10-28 19:27  guardwhy  阅读(126)  评论(0)    收藏  举报