Javascript 使用Vue.js进行条件样式渲染

我有一个渲染元素的组件。每个元素的宽度取决于

最小化的
值（
true
或
false
）。我需要没有类的条件样式绑定

我试过：

{conversation.minimized==false？右：$index*285+'px'：右：$index*150+'px'}

但它不起作用，我也有错误。
我不知道你想做什么。但是你想让一个div变小还是变大？如果是这样，您可以使用计算的var来计算该值。因为它是反应性的，如果你改变其中的任何一个值，它会动态地评估这个值

一个小例子：

<style>
  .classA {float:right,width:200px}
  .classB {float:right,width:400px}
</style>

如果不确切了解您的代码，这会更困难
 
currentItemPosition:函数（索引、对话）{
currentItemPosition: function(index, conversation) {
            var indexOfCurrentElement = this.conversations.indexOf(conversation);  
            var right = 0;

            if (indexOfCurrentElement > 0) {
                for (var i=0; i<indexOfCurrentElement; i++) {
                    if (!this.conversations[i].minimized) {
                        right += 285;
                    } else {
                        right += 170;
                    }
                }
                return "right: " + right + "px";

            } else {
                return "right: 0px";
            } 
        }
    }

var indexOfCurrentElement=this.conversations.indexOf（conversation）；
var-right=0；
如果（indexOfCurrentElement>0）{
对于（var i=0；i为了使事情更加模块化，我们可以创建一个组件来包装div和样式的逻辑。用法如下：

<card :index="$index" :minimized="conversation.minimized"></card>



组件的定义为：

Vue.component( 'card', {
    props: ['index', 'minimized'],
    template: '\
        <div class="card" :style=[cardStyles]>\
    ',
    computed: function () {
        cardStyles: function () {
            var ratio = this.minimized ? 150 : 285;
            return {
                right: ( this.index * ratio ) + 'px'
            }
        }
    }
} );

Vue.component（'card'{
道具：[“索引”，“最小化”]，
模板：'\
\
',
计算：函数（）{
卡片样式：函数（）{
var比率=这个最小值？150:285；
返回{
右：（this.index*ratio）+“px”
}
}
}
} );

它接收
索引
和
缩小的
值，然后使用一个计算函数来获取div样式。
我没有真正获得您的代码，但是如果您想要条件样式绑定，您可以这样做：

<template>
    <div
        :style="condition ? { 'color': 'red' } : { 'color': 'blue' }"
    >
        Some data
    </div>
</template>

<script>
export default {
    data() {
        return {
            condition: false
        }
    }
}
</script>


一些数据
导出默认值{
数据（）{
返回{
条件：假
}
}
}
确切地说，我想让div变小或变大取决于它是否最小化。你能给我一个例子看看它应该是什么样子吗？在不知道代码更难的情况下用一个例子更新了我的答案这不是我真正需要的。我发布了我的工作代码，所以你可以查看它。无论如何，谢谢你的建议！使用
：class=“classChanger”
而不是
class=“{{classChanger}}”
要使用当前的VueYou可以将计算简化为一行…
返回！this.conversation.minimized？'classA'：'classB'；
应该是
v-bind:style=“{right:conversation.minimized？$index*150+'px'：$index*285+'px'}“
我用了不同的方法。
Vue.component( 'card', {
    props: ['index', 'minimized'],
    template: '\
        <div class="card" :style=[cardStyles]>\
    ',
    computed: function () {
        cardStyles: function () {
            var ratio = this.minimized ? 150 : 285;
            return {
                right: ( this.index * ratio ) + 'px'
            }
        }
    }
} );

<template>
    <div
        :style="condition ? { 'color': 'red' } : { 'color': 'blue' }"
    >
        Some data
    </div>
</template>

<script>
export default {
    data() {
        return {
            condition: false
        }
    }
}
</script>