如何基于API数据在EJS文件中通过条件判断动态修改内容？

你的EJS条件判断失效，大概率是数据类型不匹配导致的：如果后端index.js传来的uvdata是数字类型（比如0、3），但你在判断里用了字符串（'0'、'3'）做全等比较（===），两者类型不同，判断逻辑自然不生效。

修正方案1：统一数据类型做比较 #

把判断条件里的字符串值改成数字，直接和数字类型的uvdata对比：

<div class="card" >
    <div class="UVradiation">
        <div class="title">
            <h2 class="uv">当前紫外线强度: <%= uvdata %></h2>
        </div>
        <div>
            <% if(uvdata === 0 || uvdata === 1 || uvdata === 2) { %>
                <p>低紫外线强度，无需特殊防护，正常外出即可。</p>              
            <% } else if(uvdata === 3 || uvdata === 4 || uvdata === 5) { %>
                <p>中等紫外线强度，外出建议涂抹防晒霜、佩戴遮阳帽。</p>
            <% } else if(uvdata === 6 || uvdata === 7) { %>
                <p>较高紫外线强度，避免正午时段外出，做好全面防晒措施。</p>
            <% } else if(uvdata === 8 || uvdata === 9 || uvdata === 10) { %>
                <p>高紫外线强度，尽量减少外出，必须外出时穿戴防晒衣物、墨镜。</p>
            <% } else { %>
                <p>极强紫外线强度，严禁长时间暴露在户外，建议留在室内。</p>
            <% } %>
        </div>
    </div>
</div>

修正方案2：先转换uvdata类型再判断 #

如果后端传来的uvdata是字符串类型，先通过parseInt()或Number()把它转成数字，再用区间判断（比逐个值写||更简洁）：

<div class="card" >
    <div class="UVradiation">
        <div class="title">
            <h2 class="uv">当前紫外线强度: <%= uvdata %></h2>
        </div>
        <div>
            <% // 先将uvdata转为数字类型 %>
            <% const uvNum = parseInt(uvdata); %>
            <% if(uvNum >= 0 && uvNum <= 2) { %>
                <p>低紫外线强度，无需特殊防护，正常外出即可。</p>              
            <% } else if(uvNum >= 3 && uvNum <= 5) { %>
                <p>中等紫外线强度，外出建议涂抹防晒霜、佩戴遮阳帽。</p>
            <% } else if(uvNum >= 6 && uvNum <= 7) { %>
                <p>较高紫外线强度，避免正午时段外出，做好全面防晒措施。</p>
            <% } else if(uvNum >= 8 && uvNum <= 10) { %>
                <p>高紫外线强度，尽量减少外出，必须外出时穿戴防晒衣物、墨镜。</p>
            <% } else { %>
                <p>极强紫外线强度，严禁长时间暴露在户外，建议留在室内。</p>
            <% } %>
        </div>
    </div>
</div>

额外排查建议 #

可以在后端index.js里打印uvdata的类型确认问题：

console.log(typeof uvdata); // 输出string或number，明确类型后再调整前端判断

内容的提问来源于stack exchange，提问作者Mythri