基本语法:

1、双向数据绑定

vue

指令:v-model="msg"

react

constructor(){
this.state{
msg:"双向数据绑定"
} render(){
<input type="text" value={this.state.msg} onChange={(ev)=>this.handleChange(ev)} />{msg}
} handleChange(ev){
this.setState({
msg:ev.target.value
})
}

angular --ngMel(属性型指令)

app.Module.ts:
import FromsModule from "@angular/froms"; app.component.ts:
export class Appcomponent{
msg:"双向数据绑定"
} app.components.html:
<input [(ngModel)]="msg" />{{msg}}

2、条件渲染:

vue

指令:
v-if v-else-if v-else v-show

react

使用三目(三联)运算:{true ? x:y}

angular ---*ngIf(结构型指令)

指令:*ngIf

没有else指令
如果想要else,要使用ng-template

demo:
<div *ngIf="isShow else elseBack">aaaaaaaaaaaaaaaaaaa</div>
<ng-template #elseBack>ddddddddddddddd</ng-template> ng-template:模板

3、列表渲染:

vue

指令:v-for

<li v-for="item,index in list" key="index">{{item}}</li>

react

this.state.list.map((item)=>{
return <li key="item.id">{item}</li>
})

angular

指令:*ngFor

<ul>
<li *ngFor="let item of list,let i=index">{{i}},{{item}}</li>
</ul> <ul>
<li *ngFor="let item of list,index as i">{{i}},{{item}}</li>
</ul> 指令:ngSwitch //多行选择 js:
  nowSwitch=1;
  listSwitch=[1,2,3]; html:
<div [ngSwitch]="nowSwitch"> //nowSwitch是什么值。就显示值为其的ngSwitchCase.
<div *ngFor="let item of listSwitch"><div *ngSwitchCase="item">{{item}}</div></div>
</div>

angular小案例:Todos

app.component.html:

<input type="text" [(ngModel)]="info" (keydown)="handleAdd($event)" >  //输入框
<ul>
<li *ngFor="let item of list,index as i">
{{i}},{{item}} <button (click)="handleRemove(i)">X</button>
</li> //显示列表
</ul> app.component.ts: export class AppComponent {
list:Array<any>=[111,222,333]; //加入数据的数组
info=""; //数据绑定变量
handleAdd(ev){ //添加数据的方法
if(ev.keyCode===13) {
this.list.unshift(this.info);
this.info = "";
}
} handleRemove(index){ //删除数据的方法
this.list.splice(index,1);
}
}

angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例的更多相关文章

  1. angular,vue,react的基本语法—样式处理

    基本语法 样式处理: vue: 动态属性: v-bind:class 简写 :class react: 变量:class={selecter} angular: 指令:[ngClass]=" ...

  2. angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式

    基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...

  3. angular,vue,react的基本语法—插值表达式,渲染数据,响应式数据

    基本语法: 1.插值表达式: vue:{{}} react:{} angular:{{}} 2.渲染数据 vue js: export default{ data(){ return{ msg:&qu ...

  4. 2015前端各大框架比较(angular,vue,react,ant)

    前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...

  5. 前端三大框架(Angular Vue React)

    前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...

  6. Angular Vue React 框架中的 CSS

    框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...

  7. 【vue2】Style和Class,条件,列表渲染,双向数据绑定,事件处理

    目录 1.style和class 2. 条件渲染 2.1 指令 2.2 案例 3. 列表渲染 3.1 v-for:放在标签上,可以循环显示多个此标签 3.2 v-for 循环数组,循环字符串,数字,对 ...

  8. angular vue react web前端三大主流框架的对比

    首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分 ...

  9. Vue指令之`v-model`和`双向数据绑定

     v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定 <input type="text" v-bind:value="msg& ...

随机推荐

  1. 洛谷P2278操作系统

    题目 这个题是一个名副其实的考验细节和头脑清醒的一个题. 根据提议我们可以进行分类讨论. 我们用优先队列来模拟CPU,我们可以用在线的算法来写,每次输入一个进程都要判断这个进程是否可以挤掉优先队列里的 ...

  2. 洛谷P3870开关题解

    我们先看题面,一看是一个区间操作,再看一下数据范围,就可以很轻松地想到是用一个数据结构来加快区间查询和修改的速度,所以我们很自然的就想到了线段树. 但是这个题还跟普通的线段树不一样,这个题可以说要思考 ...

  3. [SDOI2015] 寻宝游戏

    传送门:>Here< 题意:给出一棵树(有边权),刚开始键值全部为0.每次对其中一个键值进行异或,问每一次修改之后:选择任意一个点出发走到所有为1的点再走回来的最短路 解题思路 由于N,M ...

  4. NEW —— Code

    http://ai.baidu.com/ 百度AI开放平台

  5. WC2019 tree

    WC2019唯一一道正常的题,考场上没什么想法,也只拿到了暴力分.搞了一天终于做完了. 前置知识:purfer序,多项式exp或分治FTT. 对于\(type=0\)的,随便维护下,算下联通块即可. ...

  6. CSS实现背景透明,文字不透明(兼容所有浏览器)

    我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例: 打开ps,在图层面板上,可以看到设置图层整理不透明度的菜单,从 0% (完全透明)到 100%(完全不透明). 实现透明的css方 ...

  7. 「SCOI2016」萌萌哒 解题报告

    「SCOI2016」萌萌哒 这思路厉害啊.. 容易发现有个暴力是并查集 然后我想了半天线段树优化无果 然后正解是倍增优化并查集 有这个思路就简单了,就是开一个并查集代表每个开头\(i\)每个长\(2^ ...

  8. js 判断数据是否为空

    js 判断数据是否为空 // var a = ""; // var a = " "; // var a = null; // var a = undefined ...

  9. 用lemon测交互题

    题目类型:传统. 答案比较类型:逐行比较类型(忽略多余空格和制表符). 配置:交互. 编译器参数: -o %s %s.* ..\..\data\%s\judge.cpp -Wl,--stack= ju ...

  10. django(七)之数据库表的单表-增删改查QuerySet,双下划线

    https://www.cnblogs.com/haiyan123/p/7738435.html https://www.cnblogs.com/yuanchenqi/articles/6083427 ...