angular、react、vue を使用して同じインタビューの質問コンポーネントを実装する

React、angular、vue はいずれも最近人気のある 3 つのフレームワークであり、この記事では主に、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 中国語 Web サイトの他の関連記事を参照してください。