vue学习路(三)：computed计算属性，字符串翻转+成绩筛选

最新推荐文章于 2024-02-22 11:50:32 发布

·傻蛋儿·

最新推荐文章于 2024-02-22 11:50:32 发布

阅读量1.2k

点赞数

分类专栏： vue学习文章标签： vue.js html 前端

本文链接：https://blog.csdn.net/qq_44860114/article/details/121426836

版权

本文介绍了Vue.js的computed计算属性，包括其作为数据处理和缓存的功能。通过两个示例——字符串翻转和成绩筛选，详细展示了如何使用computed属性来简化代码并提高效率。文章提醒读者注意箭头函数中this的指向问题，并提供了一个多菜单切换效果的练习题目。

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

vue-computed计算属性

什么是计算属性？可以简单的理解能够在里面写一些计算逻辑的属性。

特点：

能够处理data数据，并返回处理后的数据结果，供页面直接使用。
能够监测到data的变化，重新触发计算。
data不变的情况下，第一次运算的结果可以多次重复使用，相当于被缓存起来。
computed计算属性内可以非常灵活的处理数据。
降低了代码冗余度(相比较不使用计算属性而言)。

只看到这里还是有点懵，下面通过两个小demo可以更加深入的了解computed计算属性。

demo1——字符串翻转

<div id="app">
        不使用computed计算属性实现翻转字符串 
        <!-- 缺点：代码冗余度高 ，每一个{
   {}}中都执行一次运算-->
        <h1>{
  {msg.split('').reverse().join('')}}</h1>
        <h1>{
  {msg.split('').reverse().join('')}}</h1>
        <h1>{
  {msg.split('').reverse().join('')}}</h1>
        使用了computed计算属性：
        <!-- 代码的冗余度低，虽然调用了三次，但是只计算了一次 -->
         <!-- 直接调用computed中的属性 -->
        <h1>{
  {reverseMsg}}</h1>
        <h1>{
  {reverseMsg}}</h1>
        <h1>{
  {reverseMsg}}</h1>
    </div>
    <script>
        new Vue