vue computed 计算属性

最新推荐文章于 2024-07-28 19:41:36 发布

了优刘_

最新推荐文章于 2024-07-28 19:41:36 发布

阅读量129

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/lgg1997/article/details/125282477

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中计算属性的使用方法，包括基本用法（如结合data中的多变量计算）和复杂用法（带有getter和setter）。通过实例演示了如何解决模板中的逻辑问题，以及计算属性的缓存机制。

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

vue computed 计算属性

用于解决在模板种复杂的逻辑问题
比较适合多个变量的改变返回一个数据值的情况
计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值
计算属性默认只有 getter，不过在需要时也可以提供一个 setter

1. 简单用法

<template>
  <div>{{ count }}</div>
</template>
<script>
export default {
  name: 'ComputedNote',
  data() {
    return {
      first: '第一个参数',
      second: '第二个参数'
    }
  },
  computed: {
    count() {
      return this.first + '-' + this.second
    }
  }
}
</script>

2. 复杂用法 ( getter , setter )

<template>
  <div>
    <input type="text" v-model="count" />
  </div>
</template>

<script>
export default {
  name: 'ComputedNote',
  data() {
    return {
      first: '第一个参数',
      second: '第二个参数'
    }
  },
  computed: {
    count: {
      get() {
        return this.first + '-' + this.second
      },
      set(val) {
        const _v = val.split('-')
        this.first = _v?.[0] || ''
        this.second = _v?.[1] || ''
      }
    }
  }
}
</script>