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

Question

我有一个渲染元素的组件。每个元素的宽度取决于minimizedvalue (true或false)。我需要这里没有类的条件样式绑定。

我试过：

{ conversation.minimized == false ? right: $index * 285 + 'px' : right: $index * 150 + 'px' }

但它不起作用并且我遇到了错误。

Answer 1

我不太明白你的代码，但如果你想要条件样式绑定，你可以这样做：

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

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

Answer 2

我不确定你想做什么。但你想让 div 变小或变大？如果是这样，您可以使用计算的 var 来评估该值。因为它是反应性的，所以如果您更改其中任何值，它会动态评估该值。

一个小例子：

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

在你的 HTML 上

<div id="#app">
<div class="{{ classChanger }}">your stuff</div>
</div>

在你的 Vue 上

computed:{
    classChanger: function(){
        var theClass = 'classB';
        if(this.conversation.minimized == false){
            theClass = 'classA';
        }
        return theClass:
    }
}

如果不确切地知道你的代码，那就更难了。