Day10——vue的计算属性computed

一. 回顾

前面学习了Day9——v-bind动态绑定class、style,今天来学习vue的计算属性

二. vue的计算属性

2.1 计算属性的应用情景

需求:有时候需要在多个地方将多个数据结合在一起显示,或者对数据进行转换后再显示。比如我们有2各变量firstName和lastName,需要结合起来显示完整的名称。如果不用计算属性,我们需要在多处地方书写{{firstName}}{{lastName}}

由上面的需求,我们不难想到可以使用vue的methods属性,如下:

<div id="app">
  <!-- 将名字结合起来展示的普通做法-->
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{getFullName()}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Lebron',
      lastName: 'James'
    },
    methods: {
      getFullName: function () {
        return this.firstName + ' ' + this.lastName;
      }
    },
  })
</script>
</body>

效果:
在这里插入图片描述
虽然使用methods属性可以解决上面的需求,但是用methods属性的话,在mustache语法里面写的是方法名(即{{xxx()}}),mustache语法里面一般写的是名字而不是方法,所以用computed计算属性可以有更好的效果。

2.2 计算属性的基本使用

语法:

computed:{
  xxx: function(){
  
  }
}

例子:

<body>

<div id="app">
  <!-- 将名字结合起来展示的普通做法-->
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{firstName + ' ' + lastName}}</h2>
  <!--使用methods属性-->
  <h2>{{getFullName()}}</h2>
  <!--使用computed属性-->
  <h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Lebron',
      lastName: 'James'
    },
    methods: {
      getFullName: function () {
        return this.firstName + ' ' + this.lastName;
      }
    },
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName;//注意如果变量没有用this修饰,那么vue将会去全局找变量,而不是在vue的data属性里面找
      }
    }
  })
</script>
</body>

效果:
在这里插入图片描述

2.3 计算属性的复杂操作

需求:有时候需要计算各种数据的累加

例子:

<div id="app">
  总价格:{{totalPrice}}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {id:100, name: 'aaa', price:119},
        {id:101, name: 'bbb', price:139},
        {id:102, name: 'ccc', price:79},
        {id:103, name: 'ddd', price:89},
      ]
    },
    computed: {
      totalPrice: function () {
        let result = 0;
        for(let i = 0; i < this.books.length; i++){
          result += this.books[i].price;
        }
        return result;
      }
    }
  })
</script>
</body>

效果:
在这里插入图片描述

2.4 计算属性的getter和setter

例子:

<body>
<div id="app">
  {{fullName}}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Kobe',
      lastName: 'Bryant'
    },
    computed: {
      //这种写法是最简便的写法
      // fullName: function () {
      //   return this.firstName + ' ' + this.lastName;
      // }
      //计算属性一般没有set方法,只读属性
      // fullName: {
      //   get: function () {
      //     return this.firstName + ' ' + this.lastName;
      //   }
      // },
      //完整写法
      fullName: {
        set: function (newValue) {
          console.log('----------' + newValue);
          const name = newValue.split(' ');
          this.firstName = name[0];
          this.lastName = name[1];

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

2.5 computed计算属性和methods属性的对比

2.5.1 使用methods

<body>
<div id="app">
  <!-- 定义mthods-->
  <h2>{{getFullName()}}</h2>
  <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: 'Kobe',
      lastName: 'Bryant'
    },
    methods: {
      getFullName: function () {
        console.log('getFullName');
        return this.firstName + ' ' + this.lastName;
      }
    }
  })
</script>
</body>

效果:
在这里插入图片描述

2.5.2 使用computed

<body>
<div id="app">
   <h2>{{fullName}}</h2>
   <h2>{{fullName}}</h2>
   <h2>{{fullName}}</h2>
   <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('getFullName');
        return this.firstName + ' ' + this.lastName;
      }
    },
    computed: {
      fullName: function () {
        console.log('fullName');
        return this.firstName + ' ' + this.lastName;
      }
    }
  })
</script>
</body>

效果:
在这里插入图片描述
总结:computed属性有缓存功能,性能比methods属性要好,能使用computed属性就尽量使用computed属性。

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页