**如下
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
head
>
>
>
div>
body
>
src=
""crossorigin
>
script
>
src=
""crossorigin
>
script
>
src=
"">
script
>
>
>
div>
body
>
type
="text/babel"
>
class
demo2
extends
react.component
render()
else}}
class
demo
extends
react.component}fn
(type))}
render()
onclick=
>tab1<
/button>
onclick=
>tab2<
/button>
/>
<
/div>)}
} reactdom.
render
(>
,document.
getelementbyid()
)script
>
html
>
>
.active
style
>
列表渲染type
="text/babel"
>
class
demo
extends
react.component
}render()
>**種類有:
<
/li>)}
)return
(<
/ul>)}
} reactdom.
render
(>
,document.
getelementbyid()
)script
>
type
="text/babel"
>
class
demo
extends
react.component
}render()
>v**種類有:
<
/li>
)return
(<
/ul>)}
} reactdom.
render
(>
,document.
getelementbyid()
)script
>
總結:根據資料,通過map返回出新陣列,陣列裡面的標籤必須新增上key屬性,實在沒有不重複的就用下標
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
head
>
>
>
div>
body
>
src=
""crossorigin
>
script
>
src=
""crossorigin
>
script
>
src=
"">
script
>
type
='text/babel'
>
class
demo
extends
react.component
}fnchange
(event))}
render()
onchange=
/>
<
/li>
"password" name=
"pass" value=
onchange=
/>
<
/li>
"msg" value=
onchange=
>
<
/textarea>
<
/li>
男:"radio" name=
"***" value=
"boy" onchange=
checked/
>
女:"radio" name=
"***" value=
"girl"
/>
<
/li>
"sel" onchange=
value=
>
"html"
>html<
/option>
"css"
>css<
/option>
"js"
>js<
/option>
<
/select>
<
/li>
提交<
/button>
<
/li>
<
/ul>
<
/form>
<
/div>)}
} reactdom.
render
(>
,document.
getelementbyid()
)script
>
html
>
總結: 小程式學習 條件渲染和列表渲染
文件 在框架中,使用 wx if 來判斷是否需要渲染該 塊 true也可以用 wx elif 和 wx else 來新增乙個 else 塊 5 1 2 2 3因為 wx if 是乙個控制屬性,需要將它新增到乙個標籤上。如果要一次性判斷多個元件標籤,可以使用乙個 block標籤將多個元件包裝起來,並在...
vue學習 條件渲染
v if指令用於條件性地渲染一塊內容。這塊內容只會在指令的表示式返回 truthy 值的時候被渲染。也可以用v else新增乙個 else 塊 因為v if是乙個指令,所以必須將它新增到乙個元素上。但是如果想切換多個元素呢?此時可以把乙個元素當做不可見的包裹元素,並在上面使用v if。最終的渲染結果...
react條件列表渲染
條件渲染 1.條件判斷 constructor props render else return 封裝到函式中 constructor props render gettitlejsx else return titlejsx 2.三元運算子class extends react.component...