1、什么是计算属性
一般情况下在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来显示:
- 比如我们有firstName和lastName两个变量,我们需要显示完整的名称。
- 但是如果多个地方都需要显示完整的名称,我们就需要写多个{ {firstName}}{ {lastName}}
我们可以将上面的代码换成计算属性,计算属性是写在实例的computed选项中的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 拼接的方式,体验不好,不好理解-->
<h2>{
{firstName}} {
{lastName}}</h2>
<h2>{
{firstName + ' ' + lastName}}</h2>
<!--使用方法的方式-->
<h2>{
{getFullName()}}</h2>
<!-- 使用计算属性的方式,不用加()-->
<h2>{
{fullName}}</h2>
</div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'kim',
lastName: 'tian'
},
// 计算属性
computed: {
fullName() {
return this.firstName + ' ' + this.las