vue-计算属性

发布时间：2024年01月10日

介绍：

  • 在JavaScript中，计算属性（Computed Property）是一种特殊类型的属性，其值是根据其他属性的值动态计算出来的。计算属性的名称通常以方括号 [] 包围，并且它们的值是根据一个或多个其他属性的值计算得出的。

1. 本质：

  • 计算属性本质上是一个函数，它通过get方法来获取值。计算属性的值会被缓存，只有相关依赖发生变化时，才会重新计算。
  • 使用方式和data中的普通属性相同。

2. 使用场景：

  1. 动态计算属性值：当需要根据其他属性的值动态计算属性值时，可以使用计算属性。例如，根据两个数字属性计算出它们的和或差。
  2. 缓存计算结果：计算属性可以缓存计算结果，只有当依赖的属性值发生变化时才会重新计算属性值，这可以提高性能。

3. 案例：

计算属性的完整写法详见：4. 计算属性的完整写法

<template>
  <div>
    <p>商品价格: {{ formattedPrice }}</p>
    <p>商品数量: {{ quantity }}</p>
    <p>总价: {{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 20,       // 商品单价
      quantity: 3      // 商品数量
    };
  },
  computed: {
    // 计算商品价格的计算属性
    formattedPrice() {
      return `$${this.price.toFixed(2)}`;
    },
    // 计算总价的计算属性
    totalPrice() {
      return this.price * this.quantity;
    }
  }
};
</script>

解析：

  • formattedPrice 和 totalPrice 都是计算属性。
  • formattedPrice 用于格式化商品价格，totalPrice 计算总价。
  • 这两个计算属性的值都是基于 price 和 quantity 这两个数据属性计算而来的。
  • 每当 price 或 quantity 发生变化时，相关的计算属性会重新计算，确保显示的信息是最新的。

4. 计算属性的完整写法

在Vue中，计算属性不仅可以使用 get() 方法来定义计算逻辑，还可以使用 set() 方法来定义当计算属性被赋值时触发的逻辑。完整的计算属性写法如下：

computed: {  
  // 计算属性名: 包含get()和set()方法的对象  
  computedProperty: {  
    get() {  
      // 计算逻辑（只读）  
      return result;  
    },  
    set(newValue) {  
      // 赋值逻辑  
      // ...  
    }  
  }  
}

5. 完整写法案例

方法来定义当计算属性被赋值时触发的逻辑。完整的计算属性写法如下：

<body>

  <div id="app">
    姓：<input type="text" v-model="firstName"><br>
    名：<input type="text" v-model="lastName"><br>
    <p>姓名：{{ username }}</p>
    <button @click="updateUserName('静静')">修改姓名</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: '',
        lastName: ''

      },
      computed: {
        username: {
        // 获取方法
          get() { 
            return this.firstName + this.lastName
          },
          // 设置方法
          set(value) { 
            if (value.trim() !== '') {
              // 给姓赋值
              this.firstName = value.slice(0, 1)
              this.lastName = value.slice(1)
            }
          }
        }
      },
      methods: {
        // 修改
        updateUserName(newUsername) {
          this.username = newUsername;
        }

      }
    })
  </script>
</body>
文章来源:https://blog.csdn.net/m0_72560900/article/details/135440086
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章