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

指令：v-model=\"msg\"

constructor(){
  this.state{
    msg:\"双向数据绑定\"
}

render(){
  <input type=\"text\" value={this.state.msg}  ={(ev)=>this.handleChange(ev)} />{msg}
}

handleChange(ev){
  this.setState({
    msg:ev.target.value  
  })
}

app.Module.ts:
import FromsModule from \"@angular/froms\";

app.component.ts:
export class Appcomponent{
    msg:\"双向数据绑定\"
}

app.components.html:
<input [(ngModel)]=\"msg\" />{{msg}}

指令：
v-if v-else-if v-else v-show

使用三目（三联）运算：{true ? x:y}

指令：*ngIf

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

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

ng-template:模板

指令：v-for

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

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

指令：*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>

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