angular基础--各种绑定

文本绑定

• html部分：
  
  可渲染html标签
  

  {{msg}}

  渲染文字
• ts部分：
  设置msg值msg='我爱中国';

图片绑定

• html部分：
  三种格式

• ts部分：
  url = "https://www.baidu.com/img/bd_logo1.png";

标题绑定

• html部分：
  

  我爱我的祖国

• ts部分：
  title = 'myng'; msg='xxxx';

表单绑定

• html部分：

手动双向绑定




FormsModule 自动双向绑定数据

• ts部分：
  只用设置msg即可

条件渲染

• html部分：

我喜欢if
我爱else

• ts部分：
  flag=true;
  根据flag状态不同，显示不同内容；

列表渲染

• html部分：

  

    {{i+1}} {{item}}
    
  

• ts部分：
  list = ['jquery','vue','react','javascript'];

事件绑定

• html部分：
  变身 控制flag的状态为true或false
  神奇文本 改变msg内容为神奇文本
  事件参数 改变msg内容为事件参数
  响应函数 绑定函数，弹出事件
• ts部分：

showMsg(e){
    console.log(this.msg);
    alert(this.msg);
      }

类和样式的绑定

• html部分：

 夏天来啦
春天来啦！
 秋天来啦！
样式绑定
 吃的苦中苦
方为人上人

• ts部分：
  myclass='active';
mystyle = {color:"blue",'font-size':'38px','font-weight':'900'};
• style部分：
  .active{color:orangered}

checkbox绑定

• html部分：
  阅读并同意条款
登录
• ts部分：
  sel =false;默认不同意

下拉选项绑定

• html部分：

  吃饭
  睡觉
  王者荣耀

管道--默认管道 过滤器

• html部分：

时间：{{d}}
时间：{{d|date:'yy-MM-dd HH:mm:ss'}}
json:{{obj|json}}
数字：{{3.1415926|number:'1.2-2'}}

• ts部分：
  d = new Date();
obj = {name:"含含",age:18,arr:[1,2,3]}}

截取管道

• html部分：

  

  
    {{i+1}} {{item}}
    
  

• ts部分：
  只需设置list数组即可；