Day10——vue的计算属性computed

最新推荐文章于 2024-03-14 11:24:40 发布

Android_la

最新推荐文章于 2024-03-14 11:24:40 发布

阅读量132

点赞数

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

本文链接：https://blog.csdn.net/qq_40634846/article/details/107403392

版权

Vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

文章目录

一. 回顾
二. vue的计算属性

一. 回顾

前面学习了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属性。

Android_la

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day10——vue的计算属性computed

文章目录一. 回顾二. vue的计算属性2.1 计算属性的应用情景2.2 计算属性的基本使用2.3 计算属性的复杂操作2.4 计算属性的getter和setter2.5 computed计算属性和methods属性的对比2.5.1 使用methods2.5.2 使用computed一. 回顾前面学习了Day9——v-bind动态绑定class、style，今天来学习vue的计算属性二. vue的计算属性2.1 计算属性的应用情景需求：有时候需要在多个地方将多个数据结合在一起显示，或者对数据进行转换
复制链接

扫一扫

专栏目录