利用angular、react和vue实现相同的面试题组件
前言
创新互联公司专业为企业提供三山网站建设、三山做网站、三山网站设计、三山网站制作等企业网站建设、网页设计与制作、三山企业网站模板建站服务,10年三山做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
本文主要给大家介绍的是关于angular、react和vue实现相同的面试题组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
面试题要求如下所示
1、angular:
Document
- {{item.text}}
2、react:
import React, { Component } from 'react'; import './App.css'; class App extends Component { constructor(){ super(); this.state={ alll:[], values:'', flag:true } } add(e){ let arr1 = this.state.alll; arr1.push({msg:this.state.values,check1:false}); this.setState({ alll:arr1 }) console.log(this.state.alll); } change(e){ this.setState({ values:e.nativeEvent.target.value }) } delate(e){ let index1 = e.target.parentNode.id; let arr1 = []; for(var i =0;i{ alert(1); console.log(this.state.alll) } ) } checktoggle(e){ let index1 = e.target.parentNode.id; let arr1 = this.state.alll; arr1[index1].check1 = !arr1[index1].check1; this.setState({ alll:arr1 }) console.log(this.state.alll); } hideandshow(e){ this.setState({ flag : !this.state.flag }) } removeAll(){ let arr1 = []; for(var i =0;i -1;i--){ console.log(i); if(arr1[i].check1 === true){ arr1.splice(i,1); } } this.setState({ alll:arr1 }) console.log(this.state.alll); } render() { var result = []; for(let i = 0;i {this.state.alll[i].msg}
{this.state.values}
);
}
}
export default App;
//使用react写时,数组的复制有使用的不标准,正确的深度复制应该转化为字符串以后再复制,类似于代码中removeAll复制的方式。但是在当前实例中浅复制也可以完成功能。-
{result}
3、vue2.0:
Document {{item.msg1}}
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对创新互联的支持。
标题名称:利用angular、react和vue实现相同的面试题组件
当前网址:http://scyanting.com/article/pcpchd.html