Vue学习随笔_属性计算computed

最新推荐文章于 2024-10-14 13:22:38 发布

咆哮小码农

最新推荐文章于 2024-10-14 13:22:38 发布

阅读量96

点赞数 1

分类专栏：笔记 vue 文章标签： vue.js

本文链接：https://blog.csdn.net/m0_48469693/article/details/119140496

版权

笔记同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

computed:用于data中属性的计算。

computed的简单应用

<div id="app">
  <!--直接拼接-->
  <h2>{{"("+x+","+y+")"}}</h2>
  <!--computed-->
  <h2>坐标: {{ xy }}</h2>
  <!--methods-->
  <h2>坐标: {{ getxy() }}</h2>
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      x:6,
      y:7
    },
    computed:{
      xy : function () {
        return "("+this.x+","+this.y+")"
      }
    },
    methods:{
      getxy(){
        return "("+this.x+","+this.y+")"
      }
    }

  })

</script>

使用computed而不使用methods的原因是当页面多次调用时computed且属性不变时只会计算一次，而methods每次调用都会计算