Vue3 计算属性的用法详解

目录
  • computed 计算属性说明
  • 计算属性使用
  • 总结
  • 注意

上一篇博文说了 vue3 项目的 toRefs 函数和 toRef 函数,今天就稍微总结一下 vue3 的计算属性,其实学过 vue2 的宝子们应该都清楚,计算属性这个东西在项目开发过程中使用的还是比较频繁的,使用频率相对来说比较高,所以说咱今天稍微总结一下 vue3 项目中的计算属性,下面开始。

computed 计算属性说明

computed 表示计算属性,通常的作用是用来进行数据处理,方便在末班中简化书写。

比如日常在模板中我们渲染数据的时候一般是使用 {{ }} 来进行展示数据,但是有的时候嘞,获取到的数据并不是我们想要的类型,我们可以在 {{ }} 中编写表达式转换成我们需要的类型,但是呢,这样做简单的还可以,如果相对复杂的格式在 {{ }} 中编写的话就会造成模板代码繁琐,不易维护和阅读,所以这并不是最好的编码习惯,因此,vue3 也为我们提供了一些好的解决方案,计算属性就是其中一种。

计算属性可以帮我们将数据转换成需要展示的数据格式,不必在模板中编写大量的表达式进行处理。

计算属性使用

首先呢,使用 computed 需要引入。

import { computed } from 'vue'

引入这一个步骤是不可或缺的。

然后我们编写一个案例,就是一个页面有两个输入框,第一个输入框的数 加上 第二个输入框的数,使用计算属性在第三个输入框求和。

<template>
  <div>
    <h1>computed 计算属性</h1>
    <el-input v-model="num1" /> +
    <el-input v-model="num2" /> =
    <el-input v-model="num3" />
  </div>
</template>
<script>
  import { computed, ref } from 'vue'
  export default {
    setup() {
      const num1 = ref('')
      const num2 = ref('')
      const num3 = computed(() => {
        return Number(num1.value) + Number(num2.value)
      })
      return { num1, num2, num3 }
    }
  }
</script>
<style scoped>
  .el-input {
    width: 100px;
  }
</style>

保存刷新,输如前两个输入框的值,会自动计算和展示在第三个输入框。

这样就实现了最简单的计算属性。

计算属性不是只可以写一个的,可以写任意多个计算属性,怎么操作呢?看代码:

<template>
  <div>
    <h1>computed 计算属性</h1>
    <el-input v-model="num1" /> +
    <el-input v-model="num2" /> =
    <el-input v-model="num3" />
    <hr>
    <el-input v-model="num1" /> -
    <el-input v-model="num2" /> =
    <el-input v-model="num4" />
  </div>
</template>
<script>
  import { computed, reactive, toRefs } from 'vue'
  export default {
    setup() {
      const num1 = ''
      const num2 = ''
      const all = reactive({ num1, num2 })

      // 计算属性求和
      const num3 = computed(() => {
        return Number(all.num1) + Number(all.num2)
      })

      // 计算属性求差
      const num4 = computed(() => {
        return Number(all.num1) - Number(all.num2)
      })
      return { ...toRefs(all), num3, num4 }
    }
  }
</script>
<style scoped>
  .el-input {
    width: 100px;
  }
</style>

保存刷新,我们看到除了求和,还可以求差。

这样的话,就实现了在一个页面实现多个计算属性的操作,完全不用写在一个计算属性里面进行判断处理,很灵活,当然了,有三个可以写三个,有四个可以写四个。

但是有一点需要注意!

如果我们直接修改计算属性的值会报一个错误!

比如我们有一个按钮,点击之后把 num4 修改为 10 。

      function btn() {
        console.log(num4)
        num4.value = 10
      }

我们可以看一下效果。

没错,他会有一个错误,这个意思都懂,就是计算属性是只读的不允许修改。

为什么呢?

总结: 如果传递给 computed 的是一个函数,那么这就是一个 getter 函数,我们只能获取它的值,而不能直接修改它。

那我需要修改计算属性的值,我们需要怎么操作呢?其实很简单,只需要传进去一个对象。

	  // 计算属性求和
      const num3 = computed({
        get: () => {
          return Number(all.num1) + Number(all.num2)
        },
        set:(value) => {
          console.log(value)
          return all.num2 = Number(value) + 1
        }
      })

也就是说,计算属性传入一个对象, 包含get 和 set 函数, 就能实现创建一个可以修改的计算属性。

案例:

<template>
  <div>
    <h1>computed 计算属性</h1>
    <el-input v-model="num1" /> +
    <el-input v-model="num2" /> =
    <el-input v-model="num3" />
    <br>
    <br>
    <el-button type="primary" @click="btn">修改计算属性</el-button>
  </div>
</template>
<script>
  import { computed, reactive, toRefs } from 'vue'
  export default {
    setup() {
      const num1 = ''
      const num2 = ''
      const all = reactive({ num1, num2 })

      // 计算属性求和
      const num3 = computed({
        get: () => {
          return Number(all.num1) + Number(all.num2)
        },
        set:(value) => {
          console.log(value)
          return all.num2 = Number(value) + 1
        }
      })

      function btn() {
        num3.value = '10'
      }

      return { ...toRefs(all), num3, btn }
    }
  }
</script>
<style scoped>
  .el-input {
    width: 100px;
  }
</style>

点击按钮,把 num2 改成输入的数字 + 1,也就是11。

好的,这就实现了修改计算属性。

总结

  • vue.3.0 中用于从vue 按需导入 computed 计算属性。
  • 如果传入的是一个getter 函数, 会返回一个不允许修改的计算属性。
  • 使用ref 创建一个响应式对象, 在模板中使用不用自动解套。 直接渲染使用。
  • 传入一个对象, 包含get 和 set 函数, 就可以创建一个可以修改的计算属性。
  • 只可以获取值,不允许修改值直接使用 computed 计算属性使用箭头函数。
  • 既可以获取值, 也可以修改值, computed 计算属性中传入一个对象。 get 方法 和 set 方法。

注意

在 vue2 中,有一个叫做过滤器的家伙,从 vue3 开始,过滤器已经被移除,且不再进行支持。官方给的建议是用方法调用或计算属性来替换它们。

到此这篇关于Vue3 计算属性的用法详解的文章就介绍到这了,更多相关Vue3 计算属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue中的计算属性介绍

    目录 1.什么是计算属性 2.计算属性的语法 3.举例 1.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护. 例如: <div id="app"> { <!-- -->{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.而是在插值表达式中直接反转字符串,如果你在多处用到该反转字符串时,这样写就

  • vue计算属性及函数的选择

    目录 一.计算属性 使用场景 定义格式 普通写法 使用格式 示例 —— 数组求和 computed有缓存 二.总结 一.计算属性 使用场景 从已有的数据A中计算等到的新的数据B,使用计算属性. 如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据.此时就可以使用计算属性. 定义格式 在vue实例中,补充computed配置项 普通写法 { data(){}, methods: {} // 声明计算属性 computed: { //属性名字(计算属性名称) //属性

  • VUE 组件的计算属性详解

    目录 前言 计算属性 总结 前言 今天也是元气满满的一天,今天整理一下VUE组件的计算属性!~~ 开始我们的学习之旅 计算属性 先引用一张图 来看一下计算属性之间的关联: 注意: methods和computed里的东西不能重名 method:定义方法,调用方法使用currentTime(),需要带括号 computed:定义计算属性,调用属性使用currenTime2,不需要带括号:this.message是为了能够让currentTime2观察到数据变化 如何在方法中的值发生了变化,则缓存就

  • Vue之计算属性详解

    1.何为计算属性:大白话讲就是计算出来的结果保存在属性当中,可以想象为缓存. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--注意了同志们是curr

  • Vue的computed计算属性你了解吗

    目录 computed计算属性 1.什么是计算属性 2.为什么要用计算属性 3.compute.methods和watch三者的区别 4.案例:遍历数组对象的时候进行监视 总结 computed计算属性 1.什么是计算属性 计算属性 本质是方法,只是在使用这些 计算属性 的时候,把他们的名称直接当作 属性 来使用,并不会把 计算属性 当作方法去调用,不需要加小括号 ()调用. 2.为什么要用计算属性 当你需要一个属性是需要经过一些计算的,比如你要一个discounted折扣后的钱属性,现在有pr

  • Vue3 计算属性的用法详解

    目录 computed 计算属性说明 计算属性使用 总结 注意 上一篇博文说了 vue3 项目的 toRefs 函数和 toRef 函数,今天就稍微总结一下 vue3 的计算属性,其实学过 vue2 的宝子们应该都清楚,计算属性这个东西在项目开发过程中使用的还是比较频繁的,使用频率相对来说比较高,所以说咱今天稍微总结一下 vue3 项目中的计算属性,下面开始. computed 计算属性说明 computed 表示计算属性,通常的作用是用来进行数据处理,方便在末班中简化书写. 比如日常在模板中我

  • vue计算属性及使用详解

    一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理.  二.计算属性的用法 在一个计算属性里可以完成各种复杂的逻辑,包括运算.函数调

  • Python画笔的属性及用法详解

    画笔有颜色.画线的宽度等属性. 1.turtle.pensize() :设置画笔的宽度: 2.turtle.pencolor():没有参数传入返回当前画笔颜色:传入参数设置画笔颜色,可以是字符串如"green", "red",也可以是RGB 3元组 >>> pencolor('brown') >>> tup = (0.2, 0.8, 0.55) >>> pencolor(tup) >>> pen

  • jquery-mobile基础属性与用法详解

    本文实例讲述了jquery-mobile基础属性与用法.分享给大家供大家参考,具体如下: 写在前面 本文是根据w3c 学习轨迹,自己研习过程中记录下的笔记,只供自己学习轨迹记录之用,不喜勿喷. 0. 引入库 引入对应的文件: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="

  • Android帧动画、补间动画、属性动画用法详解

    在安卓开发中,经常会使用到一些动画,那么在开发中,如何使用这些动画呢? 帧动画:不是针对View做出一些形状上的变化,而是用于播放一张张的图片,例如一些开机动画,类似于电影播放,使用的是AnimationDrawable来播放帧动画 res/drawable <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.androi

  • Android搜索框SearchView属性和用法详解

    SearchView简介 SearchView是Android原生的搜索框控件,它提供了一个用户界面,用于用户搜索查询. SearchView默认是展示一个search的icon,点击icon展开搜索框,如果你想让搜索框默认就展开,可以通过setIconifiedByDefault(false);实现. SearchView属性 SearchView使用 xml中定义SearchView: <?xml version="1.0" encoding="utf-8"

  • Vue3父子组件传参有关sync修饰符的用法详解

    目录 单向数据流讲解 Vue2.x使用 定义事件的形式, 通知父组件修改 .sync 和 update: 的使用 父传子, 传递多个数据的简写 采用v-model简写(要求严格) Vue3.x使用 普通用法 简写 单向数据流讲解 单向数据流(堆可以修改,栈不可修改) 我们都知道, 父传子的数据, 是单向数据流,即子组件不能直接修改, 父组件传递过来的值 但实际上, 对于修改值, 真正是:基本数据类型不可修改,复杂数据类型不要修改引用地址(栈),它的值可以随便修改 Vue2.x使用 定义事件的形式

  • Vue3中setup方法的用法详解

    目录 1.参数props 2.参数context 3. 子组件向父组件派发事件 4.优化事件派发 5.获取父组件传递的值 1.参数props props是一个对象,包含父组件传递给子组件的所有数据.在子组件中使用props进行接收.包含配置声明并传入的所有的属性的对象. 也就是说,如果你想通过props的方式输出父组件传递给子组件的值.你需要使用props进行接收配置.即props:{......}.如果你未通过Props进行接受配置,则输出的值是undefined <template> &l

  • jQuery选择器之属性筛选选择器用法详解

    在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 <!DOCTYPE html> <

  • Pandas_cum累积计算和rolling滚动计算的用法详解

    Pandas主要统计特征函数: 方法名 函数功能 sum() 计算数据样本的总和(按列计算) mean() 计算数据样本的算术平均数 var() 计算数据样本的方差 std() 计算数据样本的标准差 corr() 计算数据样本的Spearman(Pearman)相关系数矩阵 cov() 计算数据样本的协方差矩阵 skew() 样本值的偏度(三阶矩) kurt() 样本值的峰度(四阶矩) describe() 给出样本的基本描述(基本统计量如均值.标准差等) cum累积计算函数 cum系列函数是作

随机推荐