Flask接口签名sign原理与实例代码浅析
283
2023-02-17
利用angular、react和vue实现相同的面试题组件
前言
本文主要给大家介绍的是关于angular、react和vue实现相同的面试题组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
面试题要求如下所示
1、angular:
.del{
text-decoration: line-through;
color: red;
}
.in1{
margin-left: 40px;
}
var myapp = angular.module("app",[]);rdtAFkOgh
myapp.controller("my-ctrl",function($scope){
$scope.items = [];
$scope.flag = 1;
$scope.add=function(){
$scope.items.unshift({tehttp://xt:$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);
//}
})
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( } return ( {this.state.values} {result} ); } } export default App; //使用react写时,数组的复制有使用的不标准,正确的深度复制应该转化为字符串以后再复制,类似于代码中removeAll复制的方式。但是在当前实例中浅复制也可以完成功能。 3、vue2.0:
{this.state.alll[i].msg})
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( } return ( {this.state.values} {result}{this.state.alll[i].msg})
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})
result.push(
}
return (
{this.state.values}
{result}
);
}
}
export default App;
//使用react写时,数组的复制有使用的不标准,正确的深度复制应该转化为字符串以后再复制,类似于代码中removeAll复制的方式。但是在当前实例中浅复制也可以完成功能。
3、vue2.0:
.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的数据双向绑定,从前到后遍历删除存在错误。 } } }) 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~