17.在vue中怎么动态样式类的几种方式
Posted @大迁世界
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了17.在vue中怎么动态样式类的几种方式相关的知识,希望对你有一定的参考价值。
这节课,我们来看下 Vue 中动态设置样式的几种方式。在 Vue 中有专门为 class
和 style
的 v-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\'
,当 disabled
为 true
时,开启样式 \'disabled-component\'
,否则关闭,这样就能简单动态的设置样式了。
disabled()
以上是关于17.在vue中怎么动态样式类的几种方式的主要内容,如果未能解决你的问题,请参考以下文章