angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
时间:2018-12-06
本文章向大家介绍angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例,主要包括angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例相关应用实例、知识点总结和注意事项,具有一定的参考价值,需要的朋友可以参考一下。
基本语法:
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>
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); } }
- 如何给sublime text3安装汉化包?so easy 哦
- Flash/Flex学习笔记(47):反向运动学(上)
- 汉诺塔问题算法介绍
- Flash/Flex学习笔记(36):自己动手实现一个滑块控件(JimmySilder)
- 使用Zabbix服务端本地邮箱账号发送报警邮件及指定报警邮件操作记录
- fckeditor上传问题的解决
- Flash/Flex学习笔记(46):正向运动学
- 异步Socket处理的一些测试值
- .Net中DES加密的细节问题
- 分布式监控系统Zabbix--完整安装记录 -添加web页面监控
- .Net中使用带UI的OCX的方法
- 2017数据科学领域15大热门GitHub项目
- 简单分页的性能优化
- Flash/Flex学习笔记(42):坐标旋转
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在ubuntu20上面安装R4
- 冷饭新炒:理解Snowflake算法的实现原理
- Python基础之算数运算符
- 一文带你领略并发编程的内功心法
- HBase监控
- CVPR19-Deep Stacked Hierarchical Multi-patch Network for Image Deblurring
- HTTP缓存机制与Cookie
- 52. Vue使用watch监听网页的URL变化
- 如何设计一个秒杀系统
- SQL注入之dns回显注入
- 只要一行代码,实现五种 CSS 经典布局
- Flutter-引入第三方依赖包
- Hive操作——删除表(drop、truncate)
- 如何搭建redis集群 --- redis-cluster
- IO之Standard IO