HTML原生不支持条件渲染，需依赖模板引擎（如EJS）、构建工具（如html-webpack-plugin）或框架（如Vue、小程序）在服务端、构建时或运行时实现。
纯 HTML 本身不支持条件渲染，必须借助模板引擎或框架层能力。直接写 <div> 标签加 if 判断是无效的，浏览器只会把它当普通文本或报错。
用 EJS 在服务端做条件判断
EJS 允许你在 HTML 中嵌入 JavaScript 逻辑，适合 Node.js 环境下的 SSR 场景。关键不是“在 HTML 里写 if”，而是让模板引擎先执行 JS，再吐出最终 HTML。
-
<% if (data.value) { %>和<% } %>包裹需要条件显示的 HTML 片段，注意不能漏掉闭合标签 - 变量输出用
<%= data.value %>，表达式计算用<%= data.value ? 'yes' : 'no' %> - 避免在模板里写复杂逻辑——只做简单判断，业务逻辑仍应放在路由或控制器中
- 如果
data.value是null或undefined，if (data.value)会为 false，但if (data.value !== undefined)才能区分“空字符串”和“未定义”
用 html-webpack-plugin 注入运行时参数
Webpack 构建阶段可把环境变量、功能开关等注入 HTML 模板，适用于静态站点多环境部署。
- 配置
templateParameters传入对象，比如{ env: process.env.NODE_ENV, debug: true } - 在
index.ejs中用<% if (debug) { %>...<% } %>控制开发工具栏是否生成 - 注意：这些判断发生在构建时，不是运行时——打包完的 HTML 就固定了，无法再根据用户行为切换
-
env === 'production'这类判断要严格用全等，避免字符串隐式转换导致意外匹配
微信小程序用 wx:if 实现 WXML 条件渲染
WXML 不是 HTML，它原生支持声明式条件指令，但语法和生命周期有约束。
立即学习“前端免费学习笔记（深入）”；
-
wx:if="{{condition}}"会彻底卸载/重建节点，比hidden更消耗资源，适合不频繁切换的场景 - 多个分支用
wx:elif和wx:else，注意它们必须是同级兄弟节点，且都带wx:前缀 - 想批量控制多个标签？用
<block wx:if="{{...}}">包裹，<block>不产生实际 DOM - 字符串比较要加转义：比如
wx:if="{{status == '已订阅'}}"中的单引号必须写成'已订阅'，不能用双引号套双引号
Vue 里用 <template> + v-if 批量控制元素
<template> 是语法糖，不是真实 DOM 节点，配合 v-if 可以避免额外包装元素。
- 不要写
<div v-if="flag"><span>A</span><p>B</p></div>——这会多一层无意义的<div> - 改用
<template v-if="flag"><span>A</span><p>B</p></template>，渲染后只有<span>和<p> -
v-if是“销毁/重建”，v-show是“display: none”，前者开销大但节省内存，后者切换快但始终保留在 DOM 中 - 在
v-for内部慎用v-if，性能差；优先用filter处理数据，再遍历
真正容易被忽略的是：条件渲染的“时机”——服务端模板（EJS）、构建时注入（html-webpack-plugin）、运行时框架（Vue/小程序）各自生效阶段完全不同，选错方案会导致逻辑失效或 SEO 问题。别只看语法像不像，先确认执行上下文。
