Vue计算属性

本是古典 何须时尚 2022-05-20 08:34 416阅读 0赞

计算属性就是当其所依赖的属性的值发生变化的时候，这个属性的值会自动更新，与之相关的东西也会自己更新。计算属性可以完成各种复杂的逻辑，但是最终都要返回一个结果。计算属性可以依赖多个vue实例的数据，只要其中一个发生变化，计算属性就会重新调用，相应的视图也会随之进行更新。

下面我们看个实例：

  1. <template> <div id="computed"> <li v-for="book in books"> { { book.name}} <p>书籍价格：{ { book.price}}</p> <p>书籍数量:{ { book.count}}</p> <button v-on:click="addBook(book)">加购</button> <button v-on:click="delBook(book)">减购</button> <p></p> </li> <p><b>当前书籍总价是：</b>{ { totalPrice }}人民币哦！</p> </div> </template> <script> export default ({ name: 'ComputedProperty', data() { return { books: [ { id: 0, name: 'Vue.js实战', price: 45, count: 2 }, { id: 1, name: 'Vue权威指南', price: 75, count: 10 } ] } }, methods: { addBook: function (book) { this.books[book.id].count += 1; }, delBook: function (book) { if(this.books[book.id].count <= 0) return; this.books[book.id].count -= 1; } }, computed: { totalPrice: function () { var price = 0; for (var i = 0; i < this.books.length; i++) { price += this.books[i].price * this.books[i].count; } return price; } } }) </script> <style scoped> </style>

这里我们模拟一个购物车的情况，里面是购买的书籍和数量，通过计算属性计算我们购买的书籍的总价，运行程序：
这里写图片描述

当我们点击按钮的时候，可以增加和减少当前书籍的数量，大家也可以看到，通过计算属性显示的书籍总价也会随之改变。

这里写图片描述

在我们实际使用中，计算属性还有两个比较有用的小技巧。
1.计算属性可以依赖其他计算属性
2.计算属性不仅可以依赖当前vue实例的数据，还可以依赖其他vue实例的数据

还是一样我们通过一个例子来看：

  1. <template> <div> 您的姓名是：{ { fullName}} </div> </template> <script> import Vue from 'vue'; var app1 = new Vue({ data: { firstName: 'Liu' }, computed: { formatName: function () { var format_name = this.firstName + '-'; return format_name; } } }); var app2 = new Vue({ data: { lastName: 'Sir' } }); export default { name: "MultDependentProperty", computed: { fullName: function () { return app1.formatName + app2.lastName; } } } </script> <style scoped> </style>

这里我们定义了两个Vue实例，我们在当前实例的计算属性中拼接实例1中的姓和实例2中的名字来组成我们完整的姓名，并且在实例1中的计算属性中在姓的后面加上‘-’。这里为了在一块演示，所以代码这么写了，主要是 为了让大家可以一次性对上面提到的两点有个直观的认识。

运行结果：
这里写图片描述

大家在很多教程中也会看到关于计算属性的gettter和setter的介绍，在绝大多数情况下我们只会用到计算属性的getter方法来读取计算属性，很少在业务中使用setter，所以在这里只是给大家看下两者的写法；

  1. computed: {
  2.       formatName: {
  3.         get:function () { 
  4.           var format_name  = this.firstName + '-';
  5.           return format_name;
  6.         },
  7.         set: function (newValue) { 
  8.           this.firstName = newValue;
  9.         }
  10.       }
  11.     }

在使用setter的时候也很简单正常赋值就好了，有过其他语言编程基础的很容易就理解了，比如c#中的get和set方法。

  1. fullName: function () {
  2.         app1.formatName = "Wang";
  3.         console.log(app1.firstName);
  4.         return app1.formatName + app2.lastName;
  5.       }

这里我们还用上面的例子来演示，所以修改了一下代码，大家可以自己试试。

关于计算属性缓存的问题，这里我们只提一点，我们可以通过cache开关来控制我们的程序是否开启缓存，语法如下：

  1. computed: {
  2.       cache: false,
  3.       welcome: function () { 
  4.         return Date.now() + " Welcome to Vue!";
  5.       }

默认情况下，是开启缓存的。

发表评论

表情：
评论列表 （有 0 条评论，416人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue 计算属性

    简介 构造器的 computed 选项，用于定义 Vue 实例的计算属性。 虽然模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。如果在模板中放入太多的逻...

    红太狼红太狼/ 0 赞/ 152 阅读

    相关 Vue 计算属性

    1. 前言 本节介绍计算属性的使用方法。包括什么是计算属性，计算属性的特点，还有计算属性和方法在实际使用中的区别。其中重点掌握计算属性和方法的区别，了解它之后，才能在日常

    墨蓝墨蓝/ 0 赞/ 148 阅读

    相关 Vue计算属性

    计算属性就是当其所依赖的属性的值发生变化的时候，这个属性的值会自动更新，与之相关的东西也会自己更新。计算属性可以完成各种复杂的逻辑，但是最终都要返回一个结果。计算属性可以依赖多

    本是古典 何须时尚本是古典 何须时尚/ 0 赞/ 417 阅读

    相关 Vue的计算属性

    计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子： <div id="app"> <p>原

    墨蓝墨蓝/ 0 赞/ 482 阅读

    相关 Vue计算属性

    计算属性   模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div id="example

    ￡神魔★判官ぃ￡神魔★判官ぃ/ 0 赞/ 508 阅读