class 3: vue.js 3 计算属性

最新推荐文章于 2025-08-02 12:52:49 发布

原创

最新推荐文章于 2025-08-02 12:52:49 发布 · 1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

计算属性是一种Options API，Options API是一种通过对象定义属性、方法等框架API的方式
我们知道，在模板中可以直接通过插值语法显示一些data属性中的数据。但是在某些情况下，可能需要对数据进行一些转化操作之后再显示，或者需要将多个数据结合起来进行显示
如果我们需要对多个data数据进行运算或由三元运算符来决定结果，或者对数据进行某种转化，然后显示结果。在模板中直接使用表达式，可以很方便的实现这些功能。但如果在模板中放入太多的逻辑，会让模板过重和难以维护；如果多个地方都使用相同逻辑，会有大量重复代码，不利于代码的复用，因此，应该尽可能将模板中的逻辑抽离出去。这样有两种解决办法，第一种是将逻辑抽取到方法中，放到methods的选项中，但是这样的话，所有data中数据的使用过程都变成了一个方法的调用，所以比较好的解决方法就是使用计算属性(computed)

下面是一个多种方案实现同一个需求的具体案例，可以比较一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
<!--        模板语法-->
        <h3>模板语法</h3>
        <h4>{
  
  { firstName + " " + lastName }}</h4>
        <h4>{
  
  { score >= 60 ? '及格' : '不及格' }}</h4>
        <h4>{
  
  { message.split(" ").reverse().join(" ") }}</h4>
        -------------
        <!--        methods-->
        <h3>methods</h3>
        <h4>{
  
  { getFullName() }}</h4>