17.在vue中怎么动态样式类的几种方式

Posted @大迁世界

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了17.在vue中怎么动态样式类的几种方式相关的知识,希望对你有一定的参考价值。

这节课,我们来看下 Vue 中动态设置样式的几种方式。在 Vue 中有专门为 classstylev-bind 用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组。

我经常用的一种模式就是使用 boolean 标志,如下所示:

<template>
  <div :class="disabled && \'disabled-component\'">
    当 disabled 为 true 时,这个组件被禁用了。
  </div>
</template>

<style scoped>
.disabled-component 
  background-color: gray;
  color: darkgray;
  cursor: not-allowed;

</style>

这里通过一个变量或计算属性 disabled 来开启或关闭 \'disabled-component\' ,当 disabledtrue 时,开启样式 \'disabled-component\',否则关闭,这样就能简单动态的设置样式了。

disabled() 

以上是关于17.在vue中怎么动态样式类的几种方式的主要内容,如果未能解决你的问题,请参考以下文章

vue 绑定样式的几种方式

VUE中常用的几种引入方式

定制修改组件库的几种方式

vue覆盖elementui样式的几种方式

vue动态绑定class的几种方式

Vue动态绑定class的几种方式