zoukankan      html  css  js  c++  java
  • angularcli 第二篇(数据绑定、属性申明、绑定属性)

    1、数据绑定

    • 插值绑定: <li>{{ hero.name }} </li>       或       <div  class = "{{ demo }}" >...</div>
    • 绑定HTML: <div  [innerHTML] = "...." > </div>
    • 属性绑定:  <input  [value] = "myData" />      或     <div  [ id = "id"   [title] = "msg" >...</div>
    • 事件绑定: <button (click) = "selectHero(hero)" > </button>
    • 双向数据绑定: <input  [(ngModule)] = "hero.name"/>

    注:涉及input表单时要引入 FormsModule模块:    import{ FormsModule } from '@angular/forms';

    2、属性声明

    数据要先声明,后绑定。

    (1)title = '这里是标题';

     

    (2)msg:any;      // 注:any为任意类型

     this.msg = ' 这是一条msg ';      // 先定义类型,后赋初始值

     

    (3)msg: string = ' 这是一条string类型的msg ';

     

    (4)public msg = ' 张三 ';

    注:public   公有类,可以在这个类里面使用,也可以在类外面使用

    protected  保护类型,只能在当前类和它的子类使用

    private  私有类,只能在当前类才能访问这个属性

     

    (5)public msg : string = ' 这是一个string类型的公有类 ';

     

    (6)定义样式选择器 id 的值:

    public id = ' 123 ';

    绑定属性:HTML通过 <div id = " {{ id }} " >.......</div> 来定义id的值

     

    (7)绑定 title 的值,同时鼠标瞄上去会提示msg的值:

    title = ' 这里是标题 ';

    msg : string = ' 这里是小提示 ';

    绑定属性:HTML里 <div  [title] = "msg">......</div>

     

    (8)定义数组,并赋值:

    public list = [ ];

    this.list  = [ '111' , '222' , '333' ];

  • 相关阅读:
    迭代器模式-Iterator
    kubernetes之一 k8s基本概念
    多线程中的异常处理
    MySQL高可用集群方案
    RabbitMQ的集群模式
    多线程中如何取消任务
    公钥、私钥、摘要、数字签名、证书
    将Ubuntu系统迁移到SSD固态操作
    Java线程的状态和状态转换
    Ubuntu18.04系统和软件安装记录
  • 原文地址:https://www.cnblogs.com/luwanying/p/9405810.html
Copyright © 2011-2022 走看看