v-bind之动态绑定

1. v-bind 绑定基本属性

• 动态绑定img的src属性
• 动态绑定a的href属性
• 等等

    
    
    


    

        
        
        百度一下
        百度一下
    

语法糖写法（简写）：v-bind:src简写为:src；v-bind:href简写为:href。

2. 动态绑定class

(1) v-bind 动态绑定class(对象语法)

• 格式：v-bind:class="{ 样式类名1: 布尔值1, 样式类名2: 布尔值2，... }"
• 说明：布尔值为真时，对应的样式起效。

    
    
    
    


    

        
{{message}}
        
{{message}}
        
{{message}}
        改变样式
    

语法糖（简写）：v-bind:class简写为:class；v-on:click简写为@click。
计算属性（computed）：也可以在这里绑定一个返回对象的计算属性``
方法省括号：
注意：当样式类名用 - 连接时(如：bg-bule)，要用单引号引起来。

(2) v-bind 动态绑定class(数组语法:用的很少)

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为

(3) 示例

3. 动态绑定style

(1) v-bind 动态绑定style(对象语法)

• 格式：v-bind:style="{ CSS 属性名1: 属性值1, CSS 属性名2: 属性值2,... }"
• 说明：CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。
• 应用：常用于组件化开发（组件样式为可动态改变）。

    
    
    


    

        
{{message}}
        改变样式

        
{{message}}
        
{{message}}
    

• 小程序不支持 :style="getTabbarStyles()"的语法，可改为:style="{bottom:tabbarBottom+'px'}"

拓展：直接绑定到一个样式对象

data: {
  styleObject: {
    fontSize: '100px',
    backgroundColor: 'red'
  }
}

(2) v-bind 动态绑定style(数组语法:用的很少)

    
    
    


    

        
{{message}}
    

4. 实战 之 实现点击列表item效果切换

    
    
    
    


    

        

            
{{item}}