React, angular, and vue are all three frameworks that have become popular recently. This article mainly introduces to you the relevant content about angular, react, and vue implementing the same interview question components. I will share them for your reference and study. I will not say anything else below. Enough said, let’s take a look at the detailed introduction.
Interview question requirements are as follows
##1. Angular: 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}) } return ( {this.state.values}
{result}
); } } export default App; //使用react写时,数组的复制有使用的不标准,正确的深度复制应该转化为字符串以后再复制,类似于代码中removeAll复制的方式。但是在当前实例中浅复制也可以完成功能。
The above is the detailed content of Use angular, react and vue to implement the same interview question component. For more information, please follow other related articles on the PHP Chinese website!