前言
本文主要给大家介绍的是关于angular、react和vue实现相同的面试题组件的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
面试题要求如下所示
1、angular：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="/UploadFiles/2021-04-02/angular-1.4.6.js">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<this.state.alll.length;i++){ arr1.push(JSON.parse(JSON.stringify(this.state.alll[i]))); } arr1.splice(index1,1); console.log(arr1); this.setState( {alll: arr1}, () =>{ 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<this.state.alll.length;i++){ arr1.push(JSON.parse(JSON.stringify(this.state.alll[i]))); } for(let i = arr1.length-1;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.length;i++){ result.push(<div key={i} id={i} className={this.state.flag||!this.state.alll[i].check1"checkbox" onClick={this.checktoggle.bind(this)} checked={this.state.alll[i].check1} name={i} /><span className={this.state.alll[i].check1"button" value="删除" onClick={this.delate.bind(this)} className="in" /></div>) } return ( <div className="App"> {this.state.values} <input type="text" placeholder="请添加事件" className="in" onChange={this.change.bind(this)} /> <input type="button" value="添加" onClick={this.add.bind(this)}/> <ul ref="ul1"> {result} </ul> <input type="button" value="已完成显示开关" className="in" onClick={this.hideandshow.bind(this)}/> <input type="button" value="清除已完成" className="in" onClick={this.removeAll.bind(this)}/> </div> ); } } export default App; //使用react写时，数组的复制有使用的不标准，正确的深度复制应该转化为字符串以后再复制，类似于代码中removeAll复制的方式。但是在当前实例中浅复制也可以完成功能。3、vue2.0：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="/UploadFiles/2021-04-02/vue2.0.js">
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。
