angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
程序员文章站
2023-12-26 21:44:03
基本语法: 1、双向数据绑定 vue react angular --ngMel(属性型指令) 2、条件渲染: vue react angular *ngIf(结构型指令) 3、列表渲染: vue react angular angular小案例:Todos ......
基本语法:
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); } }