利用angular、react和vue實現相同的面試題元件

React 和angular，vue 這三個框架最近都比較火，本文主要給大家介紹的是關於angular、react和vue實現相同的面試題組件的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。

面試題要求如下圖

1、angular：

nbsp;html>


<meta>
<title>Document</title>
<script></script>
<style>
.del{
text-decoration: line-through;
color: red;
}
.in1{
margin-left: 40px;
}
</style>


<input>
<button>添加</button>

• {{item.text}}

已完成开关显示 清除已完成 <script> 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<$scope.items.length;i++){ //if($scope.items[i].labs == true){ //console.log(i); //$scope.delall.push(i); //} //} //console.dir($scope.delall); //for(var j=0;j<$scope.delall.length;j++){ //if(j==0){ //$scope.items.splice($scope.delall[j],1); //} //else{ //$scope.items.splice(($scope.delall[j]-j),1); //} //} //console.dir($scope.items); //} }) </script>

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 arr1.push arr1.splice console.log this.setstate>{
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 arr1.push for>-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 result.push><input><span>{this.state.alll[i].msg}</span><input>)
}
return (
<p>
{this.state.values}

<input> 
<input>
</p>
<ul>

{result}

</ul>
<input>
<input>

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

3 、vue2.0：

nbsp;html>


<meta>
<title>Document</title>
<script></script>
<style>
.in{
margin:20px; 
}
.cl1{
text-decoration: line-through;
color: red;
}
.cl2{

}
</style>


<p>
<input>
<input>
</p><p>
<input>
<span>{{item.msg1}}</span>
<input>
</p>
<p>
<input>
<input>
</p>

<script>
new Vue({
el:&#39;#app&#39;,
data:{
msg:&#39;&#39;,
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<this.alll.length;i++){
// if(this.alll[i].check1==true){
// this.alll.splice(i,1);
// }
// }//由于vue的数据双向绑定，从前到后遍历删除存在错误。
}
}
})
</script>

以上是利用angular、react和vue實現相同的面試題元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！