Vue计算属性computed

最新推荐文章于 2024-07-15 16:28:45 发布

浩淇害死猫

最新推荐文章于 2024-07-15 16:28:45 发布

阅读量339

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/xiaoyao_zhy/article/details/124525193

版权

在vue中，有时候你需要对data中的数据进行处理，或者对抓取的数据进行处理之后再挂载呈现到标签中，这时候你就需要计算属性了，当然看到这里你可能还是不了解那下面我举几个实例并附代码解释。

实例：比如需要将字符串拼接之后呈现到标签，或者计算data之后再呈现到标签，亦或者需要对数组中的数据添删改，当然有些可以在{{}}mustache中改，但是模板中放入太多的逻辑会让模板过重且难以维护

比如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

是不是很复杂

这时候又有人觉得为什么不用methods函数，将处理的结果通过函数呈现到模板

解释：computed 内部对其进行缓存，只调用一次，只有其中的内容改变之后，才会重新调用

而methods每次都要重新计算，严重消耗效率

这里我们展示字符串拼接

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/vue.js"></script>
  </head>
  <body>
    <div id="app_1">
      <p>{{fullname}}</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app_1",
        data: {
          firstname: "liu",
          secondname: "123",
        },
        computed: {
          fullname: function () {
            return this.firstname + " " + this.secondname;
          },
        },
      });
    </script>
  </body>
</html>

是不是很好用呢？

附官网：计算属性和侦听器 — Vue.js

浩淇害死猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue计算属性computed

在vue中，有时候你需要对data中的数据进行处理，或者对抓取的数据进行处理之后再挂载呈现到标签中，这时候你就需要计算属性了，当然看到这里你可能还是不了解那下面我举几个实例并附代码解释。实例：比如需要将字符串拼接之后呈现到标签，或者计算data之后再呈现到标签，亦或者需要对数组中的数据添删改，当然有些可以在{{}}mustache中改，但是模板中放入太多的逻辑会让模板过重且难以维护比如：<div id="example"> {{ message.split('').revers
复制链接

扫一扫