Version: Next

字面量與表達式

字面量

如果表達式解析為實現了 Display 的類型，它們將被轉換為字串並插入到DOM 中作為Text 節點。

備註

字串字面量會建立 Text 節點，瀏覽器將其視為字串。因此，即使表達式包含 <script> 標籤，您也不會遇到 XSS 等安全性問題，除非您將表達式包裝在 <script> 區塊中。

所有顯示文字都必須用 {} 區塊括起來，因為文字被視為表達式。這是 Yew 與普通 HTML 語法最大的偏差。

use yew::prelude::*;

let text = "lorem ipsum";
html!{
    <>
        <div>{text}</div>
        <div>{"dolor sit"}</div>
        <span>{42}</span>
    </>
};

表達式

您可以使用 {} 區塊在 HTML 中插入表達式，只要它們解析為 Html：

use yew::prelude::*;

let name = "Yew";
html! {
  <div>{ format!("Hello, {name}!") }</div>
};

對於條件渲染，請直接在 html! 中使用 if/else 和 match，而不是在表達式區塊中巢狀 html! 呼叫：

use yew::prelude::*;

let show_link = true;

html! {
  <div>
    if show_link {
      <a href="https://example.com">{"Link"}</a>
    }
  </div>
};

通常將複雜邏輯提取到函式或閉包中是有意義的：

use yew::prelude::*;

let show_link = true;
let maybe_display_link = move || -> Html {
  if show_link {
    html! {
      <a href="https://example.com">{"Link"}</a>
    }
  } else {
    html! {}
  }
};

html! {
     <div>{maybe_display_link()}</div>
};

字面量​

表達式​

字面量

表達式