Elementos condicionales con v:if

Use v:if={condition} cuando una condición decide si existe un elemento completo. Una condición falsa evita la llamada al componente y la evaluación de sus propiedades e hijos. En el ejemplo, expensive() solo se ejecuta para elementos visibles. La misma regla se aplica a HTML y componentes recogidos con std::ui.

use std::html::{div, span, render}
use std::ui::{collect}

var calls = 0
fn expensive() -> str { calls += 1; return "visible" }
let html = <div>
    <span v:if={false}>{expensive()}</span>
    <span v:if={true}>{expensive()}</span>
</div>
assert_eq(render(html), "<div><span>visible</span></div>")
assert_eq(calls, 1)

struct UiNode { text: str, children: [Any] }
fn Label(value: str) -> UiNode { UiNode.new(text: value, children: []) }
fn Panel(children: Any = nil) -> UiNode { UiNode.new(text: "panel", children: collect(children)) }
let panel = <Panel>
    <Label v:if={false} value={expensive()}/>
    <Label v:if={true} value={expensive()}/>
</Panel>
assert_eq(panel.children.len(), 1)
assert_eq(panel.children[0].text, "visible")
assert_eq(calls, 2)
print(render(html))
print(panel.children[0].text)
print(calls)

La condición booleana se ejecuta una vez. Un elemento ausente no añade un hijo. v:if exige una expresión explícita y puede aparecer una vez por elemento. Los bloques {if ...} siguen siendo útiles para varios elementos. Las actualizaciones reactivas usan la ruta de renderizado condicional existente.

Este ejemplo funciona en la VM integrada del playground y en los modos VM, native y LLVM de la CLI. El wasm-aot independiente todavía rechaza la recolección de componentes de std::ui usada aquí, porque depende del transporte de excepciones (TryCallEnv). Capturar un fallo de la validación booleana en runtime también requiere transporte de excepciones (TryCall), todavía no disponible en ese backend. v:if en sí funciona en wasm-aot cuando las dependencias del componente están soportadas.