通常,在模板中可直接通过插值语法显示data中的属性,但是在某些情况,需要将某些数据进行转化后显示或者将多个数据结合起来显示。
- 计算属性的基本使用
<body><div id="app"><!-- 将张、三 拼接成一个完整的名字,在不使用计算属性,可以有以下写法 --><h2>{{surname + ' ' + name}}</h2><h2>{{surname}} {{name}}</h2><!--也可以使用methods 的方式写 --><h2>{{getFullName()}}</h2><!-- 以上方法第一、第二种方法,过于冗长繁琐,第三种方法,不符合阅读习惯,因为通常我们使用Mustache会直接插值,而不是调用方法 --><!-- 因此,就需要使用计算属性 --><h2>{{fullName}}</h2></div><script src="./js/vue.js"></script><script>const app = new Vue({el: '#app',data: {// 模拟后端传参surname: '张',name: '三'},methods: {getFullName: function(){return this.surname + ' ' + this.name}},// 计算属性,不同于方法,其类似于变量computed: {// 在定义计算属性时,一般不加动词get等,命名方式类似变量,在模板中也同变量一样使用fullName: function(){return this.surname + ' ' + this.name }}})</script></body>
效果图:
- 计算属性的复杂操作
<body><div id="app"><h2>总价:{{totlePrice}}</h2></div><script src="./js/vue.js"></script><script>const app = new Vue({el: '#app',data: {// 计算下面这些书籍的总价books:[{id: 101,name: 'Uinx编程技术',price: 108},{id: 102,name: '代码大全',price: 99},{id: 103,name: '深入理解计算机原理',price: 70},{id: 104,name: '现代操作系统',price: 58},]},// 计算属性,不同于方法,其类似于变量computed: {// 在定义计算属性时,一般不加动词get等,命名方式类似变量,在模板中也同变量一样使用totlePrice: function(){let result = 0;for (i = 0; i < this.books.length; i++){result += this.books[i].price;}return result;}}})</script></body>