数据绑定

1.我们先来接触数据绑定里面的第一个事件绑定

image.png

image.png

image.png

2.Dom属性绑定

image.png

image.png

image.png

Dom 属性和 HTML属性的区别
例如：

image.png

下图这个输出就是DOM的属性值 并且这个值回随着我们的输入而进行改变

image.png

下图这个输出就是HTML属性的输出 这个值是不会随着我们的输入而改变的 这个值就是一个固定值

image.png

HTML属性和 DOM属性的关系

image.png

image.png

image.png

3.HTML属性绑定

  1.基本的html属性绑定    attr.后面是html的属性名称

image.png

HTML属性绑定机制

image.png

  2.css 类绑定 


      class.后面是样式类的名称  = boolean值   这个一般用于控制一个类名 

而 ngClass适合控制多个类名。

image.png

image.png

image.png

4. 样式绑定

image.png

4.双向绑定 适用于表单

image.png

下面的写法与上面的写法作用一样
表单里面的 [value] 以及 （input） 构成了输入输出 。作用等于[(ngModel)]

image.png