vue能否动态绑定一个class同时满足两个条件？

Question

vue能否动态绑定一个class同时满足两个条件？实现这种效果

（写法肯定不对，想问一下有没有这种操作）

Answer 1

:class="{obj: A&&B ? A : B}" 在这种写法的基础上研究一下

Answer 2

在 computed写个方法不行吗？

Answer 3

html:
<div :class="{ className: allTrue}"></div>
在data 里面增加一个变量isAll
data(){
    return {
        allTrue:'默认';
        isDisabled:'';
        time:''
    }
}
methods:{
    fun () {
        this.allTrue=isDisabled&&!time?true:false;
    }
}

Answer 4

额...不知道我是不是没看懂题主的意思，一个class被两个条件控制

<template>
    <div id="loading">
        <img :class="{'trans_scale': isCreated && enabled}" :src="imgUrl" alt="图片来源于"/>
    </div>
</template>

<script>
export default {
    name: 'loading',
    props: {
        imgUrl: String
    },
    data (){
        return {
            isCreated: false,
            enabled: true
        }
    },
    created: function(){
        this.isCreated = true;
    }
}
</script>

我这样是可以的

Answer 5

自己再methods中自己写一个方法判断一下不就好了？

Answer 6

你本身这样的写法是可以的

:class="{'xxx': a && b}", 
:class="[a && b ? 'xxx' : '' ]"

Answer 7

使用 filter

Answer 8

:class中用对象、数组形式，还有字符串形式都可以
:class="{'className': A && B}"
:class="[A && B ? 'className' : '']"
:class="A && b ? 'className' : ''"