Vue动态设置Style、Class

郁宇风、黄

已于 2023-10-06 11:01:13 修改

阅读量5.8k

点赞数 2

文章标签： vue.js javascript 前端

于 2023-02-23 13:59:51 首次发布

本文链接：https://blog.csdn.net/weixin_52960369/article/details/129179758

版权

文章介绍了在Vue.js中如何使用v-bind指令动态地设置元素的style和Class。对于style，可以采用对象写法、数组写法和计算属性来实现动态绑定；对于Class，同样支持对象、数组和计算属性的方式，根据组件数据条件性地应用或移除样式和class。

摘要由CSDN通过智能技术生成

通过v-bind动态设置style

在Vue中，可以使用动态绑定来设置元素的样式（style）。动态绑定允许根据组件的数据或计算属性来决定一个元素的样式。以下是在Vue中动态设置样式的3种方法：

1.对象写法

可以使用对象语法来绑定一个对象，其中对象的属性是class名称，属性值是一个布尔值，表示是否应该应用该class。这样，可以根据条件动态添加或移除class。

<template>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">对象</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'blue',
      fontSize: 16
    };
  }
};
</script>

2.数组写法

可以使用数组语法，将多个样式对象放入数组中，并根据条件动态地在元素上应用这些样式。

<template>
  <div :style="[ { color: textColor }, { fontSize: fontSize + 'px' } ]">Dynamic Style</div>
</template>

3.计算属性

有时候，class的逻辑可能比较复杂，这时可以使用计算属性来计算应该绑定的class。

<template>
  <div :style="computedStyles">计算属性</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'blue',
      fontSize: 16
    };
  },
  computed: {
    computedStyles() {
      return {
        color: this.textColor,
        fontSize: this.fontSize + 'px'
      };
    }
  }
};
</script>

通过v-bind动态设置Class

动态设置Class的方法和动态设置Style的方法一样。下面直接上代码举例。

1.对象写法

<template>
  <div :class="{ active: isActive, 'text-danger': isError }">对象</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isError: false
    };
  }
};
</script>

<style>
.active {
  font-weight: bold;
}
.text-danger {
  color: red;
}
</style>

2.数组写法

<template>
  <div :class="[isActive ? 'active' : '', isError ? 'text-danger' : '']">Dynamic Class</div>
</template>

3.计算属性

<template>
  <div :class="computedClass">Dynamic Class</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isError: false
    };
  },
  computed: {
    computedClass() {
      return {
        active: this.isActive,
        'text-danger': this.isError
      };
    }
  }
};
</script>

<style>
.active {
  font-weight: bold;
}
.text-danger {
  color: red;
}
</style>

注意：凡是有 - 的style属性名需要变成驼峰式，比如font-size要变成fontSize

或者

使用完整字符串形式, {'font-size':'hello'}