使用angular/react/vue实现相同的面试题组件

时间：2022-02-12 00:40:05

面试题要求如下所示

使用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;
}
}
//倒序删除数组元素
$scope.delateall=function(){
for(var i=$scope.items.length-1;i>=0;i--){
if($scope.items[i].labs==true){
$scope.items.splice(i,1);
}
}
}
})
</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(<div 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" /></div>)
}
return (
<div 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)}/>
</div>
);
}
}

export default App;

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>
<div id="app">
<input type="text" placeholder="请添加事件" class="in" v-model="msg"/>
<input type="button" value="添加" @click="add()"/>
<div 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"/>
</div>
<div>
<input type="button" value="已完成显示开关" class="in" @click="showAll"/>
<input type="button" value="清除已完成" class="in" @click="removeAll($event)"/>
</div>
</div>
<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实现相同的面试题组件

使用angular/react/vue实现相同的面试题组件的更多相关文章

  1. 前端三大框架Angular &amp&semi; React &amp&semi; Vue

    前端三大框架: Angular[Google]:一套框架,多种平台移动端 & 桌面端.学会用Angular构建应用,然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web.移动 We ...

  2. angular react vue 浏览器兼容情况汇总

    一.逻辑层 框架 (1)angular Angular早在1.3版本就抛弃了对ie8的支持. (2)react React 早在0.14.x 版本就抛弃了对ie8的支持. (3)vue Vue就没打算 ...

  3. Liferay 7：如何在Liferay Portlet中使用Angular&comma; React&comma; Vue&period;js等前端框架

    https://web.liferay.com/zh/web/ivan.zaera/blog/-/blogs/modern-frontend-workflows-in-liferay-portal L ...

  4. Angular React 和 Vue的比较

    Angular(1&2),React,Vue对比 一 数据流 数据绑定 Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面. 实现原理: $scope变量中 ...

  5. Jerry的碎碎念：SAPUI5&comma; Angular&comma; React和Vue

    去年我去一个国内客户现场时,曾经和他们IT部门的一位架构师聊到关于在SAP平台上进行UI应用的二次开发时,UI框架是选用UI5还是Vue这个话题. 我们代表SAP, 向客户推荐使用UI5是基于以下六点 ...

  6. Jenkins gitlab vue&comma;angular&comma;react 自动化构建【原】

    大致思路,(本篇主要讲vue ,当然了 angular react 也是一样配置) ,转发请注明原链接,谢谢 :) 1. 服务器上面配置jenkins (安装配置,不介绍) 2.新建item *风格 ...

  7. 【转】前端框架天下三分：Angular React 和 Vue的比较

    前端框架天下三分:Angular React 和 Vue的比较 原文链接:http://blog.csdn.net/haoshidai/article/details/52346865 前端这几年的技 ...

  8. 【repost】前端学习总结（二十三）——前端框架天下三分：Angular React 和 Vue的比较

    目录(?)[+]   前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Ang ...

  9. React vs Angular vs Vue 2019

    React vs Angular vs Vue 看待这三个主流框架给出的想法 Angular is the entire kitchen that gives you all the tools ne ...

随机推荐

  1. java笔记--关于线程死锁

    关于线程死锁 什么是死锁: 在编写多线程的时候,必须要注意资源的使用问题,如果两个或多个线程分别拥有不同的资源, 而同时又需要对方释放资源才能继续运行时,就会发生死锁. 简单来说:死锁就是当一个或多个 ...

  2. C&plus;&plus;基础之预处理命令

    目录 概述——对预处理命令的理解 预处理命令的处理时间 C++中主要的预处理命令 宏定义 “文件包含”处理 选择编译 概述 使用C++的预处理命令可以提高程序的可维护性,有利于程序员以更加方便和快捷的 ...

  3. ThinkPHP 3&period;2 模板使用函数

    {$name|md5|strtoupper|substr=0,3} 编译后的结果是: <?php echo (substr(strtoupper(md5($name)),0,3));?> ...

  4. Android自学学习资料

    最近在自学Android编程,在网上看了一些博客和视频教程,觉得比较好的分享一下,继续学习,gangbade~ 国外android官网总是出现连不上的情况,如果你不想FQ的话,这里github上可以直 ...

  5. HDU 1551 Cable master

    题解:很显然的二分检索,在算法艺术上看过原题,不过这里要注意精度: #include <cstdio> int n,m; ]; bool test(double x){ ,i; ;i&lt ...

  6. IE升级到10&period;0&comma;VS2010启动调试时报&OpenCurlyDoubleQuote;未能将脚本调试器附加到计算机&period;&period;”

    IE升级到10.0,VS2010启动调试时报“未能将脚本调试器附加到计算机..” 今天,在调试代码时,调试器弹出提示框,报:未能将脚本调试器附加到计算机XXX上的进程iexplore.exe . 已附 ...

  7. &period;net md5

    今天试着写了一下MD5加密,网站注册登录估计都用到MD5,今天就把写的贴出来 public string GetMd5(string user) { using (MD5 md5 = MD5.Crea ...

  8. Redux的梳理

    学习Redux之前,我了解了它需要去解决什么问题: 用户使用方式复杂 不同身份不同使用方式 多个用户可以协作 与服务器大量交互,或者使用websocket 视图数据从多个来源获取 共享组件状态 组件之 ...

  9. Java微信二次开发（二）

    第二天,做微信文本消息接口请求与发送 需要导入库:dom4j-1.6.1.jar,xstream-1.3.1.jar 第一步:新建包com.wtz.message.response,新建类BaseMe ...

  10. perf工具crash的问题

    perf抓取时系统crash的情况.找前同事了解到perf工具导致系统crash的一种情况, perf工具默认是使用cycles,这个硬件事件是使用NMI,可能会导致内核错误. 之前文档上的perf命 ...

相关文章