php和angular react,使用angular、react和vue如何实现相同的面试题组件

eact 和angular，vue 这三个框架最近都比较火，下面这篇文章主要给大家介绍了关于利用angular、react和vue实现相同的面试题组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。

前言

本文主要给大家介绍的是关于angular、react和vue实现相同的面试题组件的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

面试题要求如下所示

1、angular：

Document

.del{

text-decoration: line-through;

color: red;

}

.in1{

margin-left: 40px;

}

添加

• {{item.text}}

已完成开关显示

清除已完成

var myapp = angular.module("app",[]);

myapp.controller("my-ctrl",function($scope){

$scope.items = [];

$scope.flag = 1;

$scope.add=function(){

$scope.items.unshift({text:$scope.val,labs:0});

}

$scope.delate=function(){

$scope.items.splice(this.$index,1);

}

$scope.labe=function(){

$scope.items[this.$index].labs=this.lab;

}

$scope.showall=function(){

if($scope.flag == 0){

$scope.flag = 1;

}

else{

$scope.flag = 0;

}

}

//倒序删除数组元素

//这里必须使用倒叙删除数组因为angular数据双向绑定，正序的话会导致数据随时更新影响for循环

$scope.delateall=function(){

for(var i=$scope.items.length-1;i>=0;i--){

if($scope.items[i].labs==true){

$scope.items.splice(i,1);

}

}

}

//delateall除了这种方式书写还有另外一种正序删除的方式

//$scope.delateall=function(){

//$scope.delall=[];

//for(var i=0;i

//if($scope.items[i].labs == true){

//console.log(i);

//$scope.delall.push(i);

//}

//}

//console.dir($scope.delall);

//for(var j=0;j

//if(j==0){

//$scope.items.splice($scope.delall[j],1);

//}

//else{

//$scope.items.splice(($scope.delall[j]-j),1);

//}

//}

//console.dir($scope.items);

//}

})

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

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

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

result.push(

{this.state.alll[i].msg}

)

}

return (

{this.state.values}

{result}

);

}

}

export default App;

//使用react写时，数组的复制有使用的不标准，正确的深度复制应该转化为字符串以后再复制，类似于代码中removeAll复制的方式。但是在当前实例中浅复制也可以完成功能。

3、vue2.0：

Document

.in{

margin:20px;

}

.cl1{

text-decoration: line-through;

color: red;

}

.cl2{

}

{{item.msg1}}

new Vue({

el:'#app',

data:{

msg:'',

alll:[],

flag1:true,

},

methods:{

add(){

this.alll.unshift({msg1:this.msg,check1:false});

console.log(this.alll)

},

delate(e){

let index1 = e.target.parentNode.id;

this.alll.splice(index1,1);

console.log(this.alll);

},

clickChecked(e){

let index1 = e.target.parentNode.id;

this.alll[index1].check1 = !this.alll[index1].check1;

},

showAll(){

this.flag1 = !this.flag1;

},

removeAll(){

console.log(this.alll);

for(var i =this.alll.length-1;i>-1;i--){

if(this.alll[i].check1==true){

this.alll.splice(i,1);

}

}

// for(let i = 0;i

// if(this.alll[i].check1==true){

// this.alll.splice(i,1);

// }

// }//由于vue的数据双向绑定，从前到后遍历删除存在错误。

}

}

})

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：