Additional Usage Examples

同学们，我们接下来深入看看模板表达式更复杂、也更实用的用法。这些例子几乎涵盖了我们日常开发组件时，绝大多数需要展示数据的场景。 首先，你可能会遇到需要根据某个状态动态切换 CSS 类名的需求。在模板里，我们可以直接用三目运算符来完成，比如 `class={isActive ? 'active' : 'inactive'}`，非常直观。条件渲染也是一样，用逻辑与 `&&` 或逻辑或 `||` 就能决定某块内容是否显示，完全不用写额外的 if 块。 接着，像货币、日期这样的数据，直接显示原始值肯定不行。这时你可以在模板里调用专门负责格式化的函数，比如 `{formatCurrency(price)}`。当然，函数要定义在 JavaScript 类里。如果你觉得一个属性不够用，还可以把多个 getter 组合起来，进行一些更复杂的计算，再把结果展示出来。 数字方面，模板表达式完全支持二进制、八进制和十六进制字面量。你直接写 `0b1010`、`0o17` 或者 `0xFF`，模板会正确解析。字符串处理也很方便，直接在花括号里用 `join` 拼接数组、用 `toUpperCase` 转大写，甚至能使用模板字面量来组合字符串。 处理列表数据时，我们经常需要过滤或者求和。模板里可以直接写 `list.filter(item => item.active).length` 来计算活跃项数量，或者用 `reduce` 算平均值。访问对象或者数组的深层属性时，生怕遇到 null 出错？可选链操作符 `?.` 直接帮你优雅地搞定，比如 `{obj?.deep?.property}`。 关于事件，你甚至可以直接在模板里定义一个内联的箭头函数作为事件处理器，比如 `onclick={() => this.doSomething()}`。虽然要小心不要滥用，但在一些简单的场景下非常灵活。 最后，别忘了类型检查和空值判断。`typeof` 操作符可以直接在表达式中使用，而 `== null` 这个神奇的比较能同时检测 `null` 和 `undefined`，帮你简化很多判断逻辑。 你看，这些模式是不是把组件要做的显示逻辑基本都覆盖全了？掌握好它们，你就能轻松应对绝大多数的界面需求了。