Update template

template.md

@@ -24,17 +24,93 @@ class Foo extends Component {
 
 ```js
 class Foo extends Component {
-	static props = {
+  static props = {
-		name: 'Wkit'
+    name: 'Wkit'
-	}
+  }
 
-	...
+  ...
 
-	render() {
+  render() {
-		return html`
+    return html`
-    		<h1>Hello ${this.name}!</h1>
+      <h1>Hello ${this.name}!</h1>
-    	`
+    `
-	}
+  }
 
 }
-```
+```
+
+### 列表渲染
+> 类似于`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>
+    `
+  }
+
+}
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+