使用 html! 巨集處理 HTML

你可以使用 html! 巨集來寫類似 HTML 的表達式。 Yew 會在背景轉換為表達 DOM 的 Rust 程式碼。

use yew::prelude::*;

let my_header: Html = html! {
    <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600" />
};

類似於格式化表達式，您可以透過使用花括號將周圍上下文的值嵌入 HTML 中：

use yew::prelude::*;

let header_text = "Hello world".to_string();
let header_html: Html = html! {
    <h1>{header_text}</h1>
};

let count: usize = 5;
let counter_html: Html = html! {
    <p>{"My age is: "}{count}</p>
};

let combined_html: Html = html! {
    <div>{header_html}{counter_html}</div>
};

html! 可以接受任意數量的根節點，因此可以直接渲染多個元素的列表：

use yew::html;

html! {
    <div></div>
    <p></p>
};

更多關於 Yew 和 HTML 的內容請參考更多 HTML。