vue动态绑定class、style的几种方法_vue template标签怎么加class-CSDN博客

本文详细介绍了Vue中动态绑定class和style的多种方法，包括直接对象绑定、计算属性绑定及条件绑定等，适用于不同场景下的样式动态调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue动态绑定class、style的几种方法

动态绑定style

方法一

// template 中
<div :style="divStyle"></div>
// data 中
  data () {
    return {
      divStyle: {
        width: '100px',
        height: '100px',
        backgroundColor: 'red'
      }
    }
  }

方法二

// template中
<div :style="{ width : width, height + 'px' : height + 'px', backgroundColor: backgroundColor }"></div>
// data中
 data () {
    return {
      width: 100,
      height: 100,
      backgroundColor: 'red'
    }
  }

方法三

// template中
<div :style="[styleW, styleH]"></div>
// data 中
data () {
    return {
      styleW：{
      	width: '100px'
      },
      styleH: {
      	height: '100px'
      }
    }
  }

动态绑定class

方法一

// template中
<div :class="{ 'active': isClass }"></div>
// data 中
data () {
    return {
     isClass: false
    }
  }

方法二(多个时)

// 多个时用逗号隔开
// template中
<div :class="{ 'active': isClass,  'active1': isClass1}"></div>
// data 中
data () {
    return {
     isClass: false,
     isClass1: true
    }
  }

方法三（三元运算符）

// template中
<div :class="[isClass? 'active1' : '']"></div>
// <div :class="[isClass? 'active1' : 'active2']"></div>
// <div :class="[activeId == index ? 'active1' : 'active2']"></div>
// data 中
data () {
    return {
     isClass: false,
     activeId: 1
    }
  }

方法四（如果标签上有一个固定class名时）

// template中
<div :class="[{ 'isClass': isActive }, 'fixation']"></div>
// <div :class="[{ 'isClass': isActive1 == 1 }, 'fixation']"></div>
// data中
data () {
    return {
     isActive : false,
     isActive1: 1
    }
  }