Vue学习总结（七）——计算属性

最新推荐文章于 2022-09-12 22:17:08 发布

田小江爱分享

最新推荐文章于 2022-09-12 22:17:08 发布

阅读量139

点赞数

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/third_/article/details/111083779

版权

本文介绍了Vue中的计算属性，用于对数据进行转换或组合后显示。讨论了计算属性的基本使用，如简化模板中的数据结合，以及复杂计算场景。同时讲解了计算属性的setter和getter，虽然setter不常用，但提供了修改内部值的可能。最后比较了计算属性与methods的区别，指出计算属性因有缓存而具备更好的性能优势。

摘要由CSDN通过智能技术生成

1、什么是计算属性

一般情况下在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来显示：

比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
但是如果多个地方都需要显示完整的名称，我们就需要写多个{ {firstName}}{ {lastName}}

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</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: 'kim',
        lastName: 'tian'
      },
      // 计算属性
      computed: {
        fullName() {
          return this.firstName + ' ' + this.las