本文介绍如何利用 Go 模板的 or 和 and 函数组合，一行内实现 HTML 属性（如 class）的条件动态拼接，避免冗长的 {{ if }}...{{ else }} 结构，提升模板可读性与维护性。
本文介绍如何利用 go 模板的 `or` 和 `and` 函数组合，一行内实现 html 属性（如 `class`）的条件动态拼接，避免冗长的 `{{ if }}...{{ else }}` 结构，提升模板可读性与维护性。
在 Go 的 html/template 中，频繁使用 {{ if }}...{{ else }} 块来控制 HTML 属性（尤其是 class）的条件渲染，不仅使模板臃肿，还容易因缩进和换行破坏语义清晰性。更优雅的解法是借助模板内置函数 and 与 or 的短路求值特性，实现“条件为真时返回指定字符串，否则返回空字符串（即 nil 效果）”——这正是 or 函数的核心能力：它按顺序求值参数，返回第一个非空（truthy）值；而 and 可用于组合多个条件。
上述场景中，目标是：当 .var1 == "val123" 时，在 class 列表前追加 "active"，否则不添加任何内容（即等效于 nil）。以下是一行式写法：
<button class="{{ or (and (eq .var1 "val123") "active") }} class1 class2 class3 class4 class5 class6">
test
</button>✅ 原理说明：
- (eq .var1 "val123") 返回布尔值；
- (and ... "active") 仅在前面条件为 true 时返回 "active"，否则返回 false（空值）；
- or 接收该结果：若为 "active" 则原样输出；若为 false/nil，则继续检查后续参数——但此处 or 后无其他参数，因此最终输出为空字符串（Go 模板中空字符串等价于未设置该部分，不会产生多余空格）。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- or 的返回值始终是其首个非空参数，因此确保 and 的最后一个参数是期望插入的字符串（如 "active"），而非布尔值；
- 模板中不会自动去除首尾空格，因此 "active" 前需手动加空格（如 " active"），或统一将固定 class 写在 or 表达式之后（如示例），由空格自然分隔；
- 若需支持多条件激活（如 active + disabled），可嵌套 and 或链式 or，例如：
class="{{ or (and (eq .state "active") "active") (and (eq .state "disabled") "disabled") }} class1 class2" - 此方法仅适用于字符串拼接类属性（如 class, data-*, aria-*），不适用于布尔属性（如 disabled 应直接用 {{ if }}disabled{{ end }}）。
总结而言，善用 and/or 组合，不仅能将多行条件逻辑压缩为单行表达式，还能让模板更接近声明式风格——逻辑内聚、视觉简洁、易于复用。在构建组件化模板（如按钮、卡片、表单项）时，这种技巧尤为实用。
