欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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);
  }
}    

上一篇:

下一篇: