专栏首页地方网络工作室的专栏vue3.0 Composition API 上手初体验 神奇的 setup 函数 (四) 计算属性 computed

vue3.0 Composition API 上手初体验 神奇的 setup 函数 (四) 计算属性 computed

vue3.0 Composition API 上手初体验 神奇的 setup 函数 (四) 计算属性 computed

上一讲中,我们讲解了 vue 3.0 的生命周期,我相信大家已经了然了。在 vue 中,计算属性 computed 是非常常用的。那么,在 vue 3.0 中,计算属性是如何使用的呢?这一讲我们来着重讨论,。

上代码!

首先,我们新建 src/views/Computed.vue 文件,并在路由中设定路由为 computed。不会操作的看上一讲的演示。

然后编写如下代码:

<template>
  <router-link to="/">点这里去首页</router-link>
  <hr>
  <div class="home">
    这里是一个计数器 >>> <span class="red">{{count}}</span> <br>
    右边的数字是上面的数字的十倍 >>> <span class="red">{{bigCount}}</span> <br>
    右边的数字是上面的数字的一百倍 >>> <span class="red">{{computeCount['100x']}}</span> <br>
    右边的数字是上面的数字的一千倍 >>> <span class="red">{{computeCount['1000x']}}</span> <br>
    <button @click="countAdd">点这个按钮上面的数字会变</button>
  </div>
</template>

<script>
// 需要使用计算属性,也需要从 vue 中导出引入
import { ref, computed } from 'vue'
// 导出依然是个对象,不过对象中只有一个 setup 函数
export default {
  setup () {
    // 定义一个 count 的响应式数据,并赋值为 0
    const count = ref(0)
    // 定义一个函数,修改 count 的值。
    const countAdd = () => {
      count.value++
    }
    // 计算属性,使用计算函数并命名,然后在 return 中导出即可
    const bigCount = computed(() => {
      return count.value * 10
    })
    // 计算多个属性,可以通过返回一个对象的方式来实现
    const computeCount = computed(() => {
      return {
        '100x': count.value * 100,
        '1000x': count.value * 1000,
      }
    })
    // 导出一些内容给上面的模板区域使用
    return {
      count,
      countAdd,
      bigCount,
      computeCount
    }
  }
}
</script>

看效果

在浏览器中访问 http://localhost:8080/#/computed 我们可以打开页面,看到如下图。

这是我多点了几次按钮,导致上面的数字变大了哈,默认都是 0

划重点

计算属性和生命周期一样,都是从 vue 中导出引入的。我们把计算属性当成一个函数来使用,直接 return 计算结果即可。

计算属性函数可以多次使用,可以返回一个值,也可以返回一个对象包含多个值。嘿嘿很爽吧!

其实最重要的是,编程风格的统一。对于 reactvue 的开发者来说,这样的编写风格是十分舒服的。但对于 vue 2.0 的开发者来说,会不太习惯。但是没关系,习惯后你会很喜欢的。

好了,关于 vue 3.0 的这些新特性,基本都讲完了,下一讲我们玩玩组件。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来先

    Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来先 前情回顾 在上一篇博文《Vue2+VueRout...

    FungLeo
  • Shell 命令行,写一个自动整理 ~/Downloads/ 文件夹下文件的脚本

    Shell 命令行,写一个自动整理 ~/Downloads/ 文件夹下文件的脚本 在 mac 或者 linux 系统中,我们的浏览器或者其他下载软件下载的文件全...

    FungLeo
  • Shell 命令行,实现对若干网站状态批量查询是否正常的脚本

    Shell 命令行,实现对若干网站状态批量查询是否正常的脚本 如果你有比较多的网站,这些网站的运行状态是否正常则是一件需要关心的事情。但是逐一打开检查那简直是一...

    FungLeo
  • 浅谈FPGA与音频处理器的结合

    FPGA通常是面向通信行业,尽管其主要开发者仍然专注于通信应用, 但他们越来越关注存储和服务器市场。

    半吊子全栈工匠
  • 超分辨率 | 综述!使用深度学习来实现图像超分辨率

    今天给大家介绍一篇图像超分辨率邻域的综述,这篇综述总结了图像超分辨率领域的几方面:problem settings、数据集、performance metric...

    AI算法修炼营
  • 027.掌握Service-Ingress使用

    对于基于HTTP的服务来说,不同的URL地址经常对应到不同的后端服务(RS)或者虚拟服务器( Virtual Host),这些应用层的转发机制仅通过Kubern...

    木二
  • Google 的神经网络生成图像 (Inceptionism) 自述(含源码下载)

    用户1737318
  • JavaScript重构技巧-让函数简单明了

    JavaScript 是一种易于学习的编程语言,编写运行并执行某些操作的程序很容易。然而,要编写一段干净的JavaScript 代码是很困难的。

    前端小智@大迁世界
  • 震惊!他竟然用回归分析做这种事

    今年的双十一已然过去,之前文章里有提到过我预测了天猫的成交额为2675.55亿元,和真实值的数据非常地相近,有朋友就问我是如何预测的,方法其实很简单,多项式回归...

    老肥码码码
  • string.length()与-1比较为什么会出现匪夷所思的结果

    今天调试程序发现了个匪夷所思的事情,-1与string.length()比较永远是-1大,看下面代码 #include<iostream> #include<s...

    用户1215536

扫码关注云+社区

领取腾讯云代金券