ホームページ > 記事 > ウェブフロントエンド > angular、react、vue を使用して同じインタビューの質問コンポーネントを実装する
angular、react、vue を使用して同じインタビューの質問コンポーネントを実装する
- 小云云オリジナル
- 2018-02-22 10:20:051623ブラウズ
React、angular、vue はいずれも最近人気のある 3 つのフレームワークであり、この記事では主に、angular、react、vue が同じ面接の質問コンポーネントをどのように実装するかに関する関連コンテンツを紹介します。参考と学習のために共有します。 . さて、以下では詳しく説明しません。
インタビューの質問要件は次のとおりです
1、angular:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular-1.4.6.js"></script>
<style>
.del{
text-decoration: line-through;
color: red;
}
.in1{
margin-left: 40px;
}
</style>
</head>
<body ng-app="app" ng-controller="my-ctrl">
<input type="text" ng-model="val">
<button ng-click="add()">添加</button>
<ul>
<li ng-repeat="(key,item) in items" ng-show="flag||!items[key].labs" ng-class={true:'del',false:'unselected'}[items[key].labs]><input type="checkbox" ng-click="labe()" ng-model="lab">{{item.text}}<input type="button" value="删除" ng-click="delate()" class="in1"></li>
</ul>
<button type="button" ng-click="showall()">已完成开关显示</button>
<button type="button" ng-click="delateall()">清除已完成</button>
</body>
<script type="text/javascript">
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>
</html>
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;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<this.state.alll.length;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<this.state.alll.length;i++){
result.push(<p key={i} id={i} className={this.state.flag||!this.state.alll[i].check1?'dis1':'disn'}><input type="checkbox" onClick={this.checktoggle.bind(this)} checked={this.state.alll[i].check1} name={i} /><span className={this.state.alll[i].check1?'del1':''}>{this.state.alll[i].msg}</span><input type="button" value="删除" onClick={this.delate.bind(this)} className="in" /></p>)
}
return (
<p className="App">
{this.state.values}
<input type="text" placeholder="请添加事件" className="in" onChange={this.change.bind(this)} />
<input type="button" value="添加" onClick={this.add.bind(this)}/>
<ul ref="ul1">
{result}
</ul>
<input type="button" value="已完成显示开关" className="in" onClick={this.hideandshow.bind(this)}/>
<input type="button" value="清除已完成" className="in" onClick={this.removeAll.bind(this)}/>
</p>
);
}
}
export default App;
//使用react写时，数组的复制有使用的不标准，正确的深度复制应该转化为字符串以后再复制，类似于代码中removeAll复制的方式。但是在当前实例中浅复制也可以完成功能。
3、vue2.0:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue2.0.js"></script>
<style>
.in{
margin:20px;
}
.cl1{
text-decoration: line-through;
color: red;
}
.cl2{
}
</style>
</head>
<body>
<p id="app">
<input type="text" placeholder="请添加事件" class="in" v-model="msg"/>
<input type="button" value="添加" @click="add()"/>
<p v-for="(item,index) in alll" :key="index" :id="index" v-if="flag1||!item.check1">
<input type="checkbox" class="in" @click="clickChecked" :checked="item.check1"/>
<span>{{item.msg1}}</span>
<input type="button" value="删除" class="in" @click="delate"/>
</p>
<p>
<input type="button" value="已完成显示开关" class="in" @click="showAll"/>
<input type="button" value="清除已完成" class="in" @click="removeAll($event)"/>
</p>
</p>
<script>
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<this.alll.length;i++){
// if(this.alll[i].check1==true){
// this.alll.splice(i,1);
// }
// }//由于vue的数据双向绑定，从前到后遍历删除存在错误。
}
}
})
</script>
</body>
</html>
以上がangular、react、vue を使用して同じインタビューの質問コンポーネントを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。