React中的vue的v-for操作。
2018-01-30 16:00
337 查看
class CityBean extends Component{
constructor(){
super();
this.state={
citys : ['安徽','北京','重庆','上海']
};
}
render(){
let citys = this.state.citys.map((city)=>{
return <span key={city}>{city}</span>
}) ;
return(
<div>
{
citys
}
</div>
);
}
}
1.使用map方法遍历数组对象。
2.传入()=>{},
3.return出单个html结构,赋值给一个变量。
4.在调用的地方使用{变量}。
constructor(){
super();
this.state={
citys : ['安徽','北京','重庆','上海']
};
}
render(){
let citys = this.state.citys.map((city)=>{
return <span key={city}>{city}</span>
}) ;
return(
<div>
{
citys
}
</div>
);
}
}
1.使用map方法遍历数组对象。
2.传入()=>{},
3.return出单个html结构,赋值给一个变量。
4.在调用的地方使用{变量}。
相关文章推荐
- React(9)列表渲染(对标Vue的 v-for)
- vue v-for及对数据的 push 操作
- [Python]MySQLdb for Python使用指南/Python的数据库操作
- VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)
- MySQL for Excel —— 用Excel方式操作MySQL
- vscode使用vue中的v-for提示错误
- mysql for mac 安装和基本操作
- react native ios添加ART.xcodeproj(ReactNative No component found for view with name “ARTSurfaceView”)
- 用c++ 操作mysql 数据库类(for linux or windows and others)
- vuex actions 使用异步操作
- unity shader 之 CG(C for graphics) 入门(2)——CG的Swizzle操作
- vue指令以及dom操作详解
- Vue和React研究
- 在Telerik for silverlight控件radtreeview、textBox、RadGridView中实现拖拉控件的操作
- OpenNI2下简单操作两个体感设备(Xtion与Kinect for Xbox 360)
- Vue.js之遍历输出JavaScript的常见数据类型(v-for)
- React相关Dom约束性和非约束性操作
- VUE v-for循环中每个item节点动态绑定不同函数的实例
- VueJs与ReactJS和AngularJS的异同点_javascript技巧
- [C++] 使用基于范围的for循环操作string