2-3.vue的实例属性：computed和methods

最新推荐文章于 2022-10-20 11:35:24 发布

堵车了

最新推荐文章于 2022-10-20 11:35:24 发布

阅读量252

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45660035/article/details/111402843

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

2-3.vue的实例属性：computed和methods

methods属性的作用

methods属性就是在vue实例和组件里面定义方法的，当要进行一些列复杂操作封装成方法时，就是在methods里面去定义。

1.代码展示

<body>
  <div id='app'>
    <p>{{count}}</p>
    <button @click='increment'>改变数据</button>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
        increment() {
          this.count++;
        }
      }
    });
  </script>

</body>

computed属性的作用

computed一般是用于对vue实例或组件里面的数据进行计算时用到的属性，如number数据的运算，string类型的拼接，截取等等运算操作

1.代码展示

<body>
  <div id='app'>
    <p>{{count}}</p>
    <p>{{countPlus1}}</p>
    <p>{{countPlus2}}</p>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 10
      },
      computed: {
        countPlus1: {
          get() {
            return this.count*2 + 1;
          },
          set(v) {
            //一般不用,所以一般也可以不写
          }
        },
        countPlus2() {
          return this.count*2 + 1;
        }
      }
    });
  </script>

</body>

2.过程分解

在这里插入图片描述

computed相对于methods的优点

我们可以注意到，能使用computed做的完全可以使用methods方法来实现。何必多此一举呢？这是由于computed在使用或其结果或缓存起来，当多个位置使用时，只会执行一次get方法，而methods是没有缓存的，每次使用必须去执行一次方法里面的逻辑。

1.代码展示

<body>
  <div id='app'>
    <p>{{count}}</p>
    <p>{{countPlus1}}</p>
    <p>{{countPlus1}}</p>
    <p>{{countPlus1}}</p>
    <p>{{countPlus1}}</p>
    <p>{{countPlus2()}}</p>
    <p>{{countPlus2()}}</p>
    <p>{{countPlus2()}}</p>
    <p>{{countPlus2()}}</p>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 10
      },
      computed: {
        countPlus1() {
          console.log("computed");
          return this.count*2 + 1;
        }
      },
      methods: {
        countPlus2() {
          console.log("methods");
          return  this.count*2 + 1;
        }
      },
    });
  </script>

</body>

2.过程分解

在这里插入图片描述

3.结果展示

在这里插入图片描述

堵车了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2-3.vue的实例属性：computed和methods

2-3.vue的实例属性：computed和methodsmethods属性的作用methods属性就是在vue实例和组件里面定义方法的，当要进行一些列复杂操作封装成方法时，就是在methods里面去定义。1.代码展示<body> <div id='app'> <p>{{count}}</p> <button @click='increment'>改变数据</button> </div>
复制链接

扫一扫