vue属性绑定：v-bind指令

1. 基本语法

• 语法： v-bind:属性名.修饰符="属性值"
• 简写： ：属性名.修饰符 = "属性值"
• 属性名
  • h5中有意义的属性名
  • DOM属性名(className,innerHTML) ==>将驼峰转为连字符“-”，并添加修饰符.prop
  • vue绑定属性时是以html属性为基准的,h5中是不存在大小写的
• 属性值： data数据仓库中的变量名
• 修饰符： prop，用于修饰当绑定的属性为DOM属性时

2. 功能

• 将标签的属性以vue语法的方式绑定动态数据

3. 特殊属性

• boolean属性： input文本框的disabled 
  • 语法： :disabled="属性值"
  • 属性值：JS中可以转换成boolean的一切变量
  • 空字符串"" 以及0： 返回true, 文本框是禁用状态, 这点不同于原生JS
  • null以及undefined: 返回false，文本框是启用状态

• class属性 
  • 语法： ：class="属性值" ||  ：classNam.prop = "属性值"
  • 属性值
    • 字符串： 实现样式的快速部署，注意样式前需要加空格
    • 数组：实现样式的动态追加，注意删除的时候，没办法控制具体删除哪个样式,只能根据数组中的元素的顺序进行删除
    • 对象：实现样式的互斥,

    
    
    
    


    

        
        
属性绑定
        添加背景色
        
        
属性绑定
        添加背景色
        
        
    
    

•  style属性
  • 语法： v-bind:style = "属性值"  || ：style = "属性值"
  • 属性值 
    • 字符串：正常的css样式
    • 对象： 多个css样式
    • 数组：将多个对象合并成一个

    
    
    


    

        
        
style属性绑定-字符串

        
        
style属性绑定-对象

        
        
style属性绑定-数组