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

【问题标题】：Conditional style rendering with Vue.js使用 Vue.js 进行条件样式渲染
【发布时间】：2016-02-07 19:00:31
【问题描述】：

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

我试过了：

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

但它不起作用，我得到了错误。

【问题讨论】：

应该是v-bind:style="{ right: conversation.minimized ? $index * 150 + 'px' : $index * 285 + 'px' }"
我的做法不同。

标签： javascript vue.js

【解决方案1】：

我并没有真正了解您的代码，但如果您想要条件样式绑定，您可以这样做：

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

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

【讨论】：

【解决方案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:
    }
}

如果不完全了解您的代码，那就更难了。

【讨论】：

没错，我想让 div 变小或变大取决于它是否最小化。你能给我举个例子吗？
在不知道代码更难的情况下用示例更新了我的答案
这不是我真正需要的。我发布了我的工作代码，以便您查看。无论如何感谢您的建议！
使用 :class="classChanger" 而不是 class="{{ classChanger }}" 来使用当前的 Vue
您可以将计算简化为一个衬里...return !this.conversation.minimized ? 'classA' : 'classB';

【解决方案3】：

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";
            } 
        }
    }

这就是我解决问题的方法。

<div class="card" v-bind:style="currentItemPosition($index, conversation)">

现在非常适合我。无论如何，按照<div> 标签来做这件事有很多逻辑。

【讨论】：

【解决方案4】：

为了使事情更加模块化，我们可以创建一个组件来包装 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'
            }
        }
    }
} );

它接收index和minified值，然后使用计算函数获取div样式。

【讨论】：