计算属性（computed）的基本使用

最新推荐文章于 2025-04-15 15:48:02 发布

小码哥呀

最新推荐文章于 2025-04-15 15:48:02 发布

阅读量1.4k

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_46112274/article/details/121111615

版权

VUE 专栏收录该内容

62 篇文章

订阅专栏

计算属性的使用

1、计算属性的基本使用
2、计算属性的复杂使用

在这里插入图片描述

1、计算属性的基本使用

<body>
<div id="app">
  <h2>{{getFullName()}}</h2>
  <h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
          message:'你好呀',
          firstName: 'Lebron',
          lastName: 'James'
        },
      //computed：计算属性
      computed: {
          fullName: function () {
            return this.firstName +' '+ this.lastName
          }
      },
      methods: {
        getFullName() {
          return this.firstName +' '+ this.lastName
        }
      }

    })
</script>
</body>

在这里插入图片描述

2、计算属性的复杂使用

<body>
<div id="app">
  <h2>总价格：{{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
      el: '#app',
      data: {
        message:'你好呀',
        books:[
          {id:101,name:'Unix编程大全',price:79},
          {id:102,name:'代码大全',price:96},
          {id:103,name:'深入理解计算机原理',price:99},
          {id:104,name:'现代操作系统',price:88},
        ]
      },
      computed:{
        totalPrice:function() {
          let result = 0
          for(let i = 0;i<this.books.length;i++){
            result +=this.books[i].price
          }
          return result
        }
      }
    })
</script>
</body>

在这里插入图片描述