vue的v-model、v-if、v-for用react语法实现

1、双向数据绑定（v-model）

vue：

<input v-model='name'/>
<span>{{name}}</span>

react：

const [name, setName] = useState<any>('')

<input value={name} onChange={e => setName(e.target.value)}/>
<span>{name}</span>

2、判断Dom元素是否显示（v-if）

vue：

<div>
  <span v-if='isName'>姓名</span>
  <span v-else='isName'>年龄</span>
</div>

react：

方式一

<div>
  {!!isName && <span>姓名</span>}
  {!isName && <span>年龄</span>}
</div>

方式二 

<div>
  {!!isName ? (
    <span>姓名</span>
  ) : (
    <span>年龄</span>
  )}
</div>

3、遍历， 渲染出相应的Dom元素（v-for）

vue：

<p v-for='(item,index) in list' :key='index'>内容：{{item}}</p>

react：

{list.map((item,index) => {return (<p key={index}>内容：{item}</p>)})}