From 2b15afaafb181e9e1806533fbdd33a107496af14 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Thu, 21 Sep 2023 15:33:59 +0800
Subject: [PATCH] Update template

---
 template.md | 96 +++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 86 insertions(+), 10 deletions(-)

diff --git a/template.md b/template.md
index 6ec38f3..ba67d43 100644
--- a/template.md
+++ b/template.md
@@ -24,17 +24,93 @@ class Foo extends Component {
 
 ```js
 class Foo extends Component {
-	static props = {
-		name: 'Wkit'
-	}
+  static props = {
+    name: 'Wkit'
+  }
 
-	...
+  ...
 
-	render() {
-		return html`
-    		<h1>Hello ${this.name}!</h1>
-    	`
-	}
+  render() {
+    return html`
+      <h1>Hello ${this.name}!</h1>
+    `
+  }
 
 }
-```
\ No newline at end of file
+```
+
+### 列表渲染
+> 类似于`React`的语法, 框架会自动拼接数组, 无需自己调用`join()`方法(纯文本渲染时, 等同于普通变量输出, 有额外格式要求时请手动`join()`)。
+
+```js
+class Foo extends Component {
+  static props = {
+    name: 'Wkit',
+    list: ['foo', 'bar']
+  }
+
+  ...
+
+  render() {
+    return html`
+      <h1>Hello ${this.name}!</h1>
+      <pre>
+        纯文本渲染:
+        ${this.list}
+      </pre>
+      
+      带dom结构的渲染: 
+      <ul>
+      ${
+        this.list.map((it, i) => html`<li>${i + 1}: ${it}</li>`)
+      }
+      </ul>
+    `
+  }
+
+}
+```
+
+
+### 条件渲染
+> 限制于原生的字符串模板的语法限制, 不支持复杂的流程语句, 所以只能用`三元表达式`等简单的表达式来实现。
+
+```js
+
+class Foo extends Component {
+  static props = {
+    name: 'Wkit'
+  }
+
+  ...
+
+  render() {
+    return html`
+      <h1>Hello ${this.name || 'Wkit'}!</h1>
+    `
+  }
+
+}
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+