Vuejs 计算属性

最新推荐文章于 2025-03-18 07:30:00 发布

苦涩2020

最新推荐文章于 2025-03-18 07:30:00 发布

阅读量338

点赞数

分类专栏： Vuejs 前端文章标签： vue 前端

本文链接：https://blog.youkuaiyun.com/UserPython/article/details/108302698

版权

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

Vuejs

8 篇文章

订阅专栏

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id='app'>
  <h2>{{firstName}} {{lastName}}</h2>

  <h2>{{fullName}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'kuse',
      lastName: 'breezy',
    },
    // 计算属性
    computed: {
      fullName: function(){
        return this.firstName + " " + this.lastName
      }
    }
  })
</script>

</body>
</html>

setter 和 getter

每个计算属性都包含一个getter和setter

<div id='app'>
  <h2>{{firstName}} {{lastName}}</h2>

  <h2>{{fullName}}</h2>

  <h2>{{fullName2}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'kuse',
      lastName: 'breezy',
    },
    // 计算属性
    computed: {
      // 完整计算属性写法
      fullName: {
        set: function(){
          // 计算属性一般是没有set方法的，只读属性
          // 一般选择删除
        },
        // 调用计算属性时，显示get方法返回内容
        get: function(){
          return this.firstName + " " + this.lastName
        }

      },
      // 由于删除了set方法，保留了get方法，所以可以简写成以下方式
      fullName2: function(){
        return this.firstName + " " + this.lastName
      }
    }
  })
</script>

计算属性和methods的对比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id='app'>
  <!-- 1、直接拼接：mustache -->
  <!-- 语法过于繁琐 -->
  <h2>{{firstName}} {{lastName}}</h2>

  <!-- 2、通过定义methods -->
  <!-- 没有缓存，每次使用都会重新调用一次 -->
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>

  <!-- 3、通过定义computed -->
  <!-- 有缓存，如果多次使用时，计算属性只会调用一次 -->
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'kuse',
      lastName: 'breezy',
      getCount : 0,
    },
    methods: {
      getFullName: function(){
        console.log('调用methods多少次？');
        return this.firstName + " " + this.lastName
      }
    },
    // 计算属性
    computed: {
      fullName: function(){
        console.log('调用了计算属性多少次？');
        return this.firstName + " " + this.lastName
      }
    }
  })
</script>

</body>
</html>