今天我们来聊聊 LWC 里一个非常实用的小技巧——怎么用模板表达式直接格式化用户输入，而不用写任何 DOM 操作代码。
想象一下，你界面上有一个输入框，用户输入名字，你想实时显示它，同时自动去掉首尾空格、统计字符数，如果为空就显示一条占位文字。在传统的写法里，你可能会在 JavaScript 里监听输入事件，然后手动去更新某个 DOM 元素的文本。但在 LWC 里，我们只需要把输入框绑定到一个属性上，比如 `name`。
当用户在输入框里打字时，`onchange` 事件会拿到输入值，我们只需要在事件处理函数里更新 `this.name` 就行了，根本不需要去 `querySelector` 或操作 innerHTML。这是关键：组件模型会自动追踪属性变化，一旦 `this.name` 变了，模板里所有用到 `name` 的表达式都会重新计算，然后视图就会自动更新。
比如模板里可以这样写：
```
{name.trim()} — 字符数：{name.length}
请输入您的姓名
```
这里用到了复合表达式：`name.trim()` 会去掉空格，`name.length` 实时显示字符数量，而 `if:false={name}` 则会在 `name` 为空时展示占位消息。这些表达式直接在模板里计算，不需要我们在 JS 里再写一个 getter 来专门格式化显示内容。
这种模式的好处是，它把显示逻辑直接放在了模板里，让代码更直观，也消除了创建多余计算属性的需要。整个流程就是：用户输入 → 更新属性 → 自动重新渲染 → 表达式重新求值 → UI 即时更新。完全摈弃了手动 DOM 操作，这也正是 LWC 响应式系统的魅力。
所以总结一下：通过模板表达式，你可以轻松实现实时格式化，代码更干净，维护起来也更容易。下次你遇到类似需求时，不妨试试这种简洁的方式。