面试题：Angular插值表达式中的复杂数据展示

Question

给定一个组件类，包含一个对象 `user = {name: 'John', age: 30}`。请使用插值表达式在模板中展示用户的姓名和年龄，并且要求在年龄后面显示 '岁' 字。同时，假设存在一个函数 `isAdult()` 在组件类中，该函数根据 `user.age` 判断用户是否成年，如何在插值表达式中根据这个函数的返回值动态显示 '（成年）' 或 '（未成年）'？

Answer 1

假设组件类使用 Vue 语法来实现，模板部分代码如下：

<template>
  <div>
    <p>姓名：{{ user.name }}</p>
    <p>年龄：{{ user.age }}岁 {{ isAdult()? '（成年）' : '（未成年）' }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { name: 'John', age: 30 }
    };
  },
  methods: {
    isAdult() {
      return this.user.age >= 18;
    }
  }
};
</script>

在上述代码中，通过插值表达式 {{ user.name }} 展示用户姓名，{{ user.age }}岁 {{ isAdult()? '（成年）' : '（未成年）' }} 展示年龄及根据 isAdult 函数判断后的成年或未成年状态。

如果是 React 语法，代码如下：

import React from'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: { name: 'John', age: 30 }
    };
  }

  isAdult = () => {
    return this.state.user.age >= 18;
  }

  render() {
    return (
      <div>
        <p>姓名：{this.state.user.name}</p>
        <p>年龄：{this.state.user.age}岁 {this.isAdult()? '（成年）' : '（未成年）'}</p>
      </div>
    );
  }
}

export default App;

这里在 JSX 中通过 {this.state.user.name} 展示姓名，{this.state.user.age}岁 {this.isAdult()? '（成年）' : '（未成年）'} 展示年龄及成年状态判断。