请教一个关于 Vue.js 条件渲染与属性的问题

[ss098]

现在有如下数据：

items: [
    {is_view: true}
    {is_view: false}
]

以及如下代码：

<div class="list">
    <div v-for="item in items">
        <div v-if="item['is_view']" class="list-item">
            <!--其他复杂的逻辑判断-->
        </div>
    </div>
</div>

我需要在 is_view 为 true 的情况下让 class 变为 .list-item .read ，所以用 v-else 。

<div class="list">
    <div v-for="item in items">
        <div v-if="item['is_view']" class="list-item read">
            <!--其他复杂的逻辑判断-->
        </div>
        <div v-else class="list-item">
            <!--其他复杂的逻辑判断-->
        </div>
    </div>
</div>

这会导致里面的逻辑重复出现两次， Vue.js 文档里提到的《 Class 与 Style 绑定》似乎需要在 data 中创建一个数据对象，但是我这里有一个列表，这可能就不太适用了。

请问大家，这个情况正确的解决方案是？

谢谢。

[yangxiongguo]

class={{item['is_view']?'classA':'classB'}}

大概这样可以吗？没实际跑过，就一个思路

[mufeng]

这样就好 :class="{'red': item.is_view}"

[mufeng]

@yangxiongguo 官方推荐 bind-class

[MaiCong]

:class="{'read': item.is_view === true}"

[ss098]

非常感谢各位菊苣，问题已经解决，代码如下：

<div v-bind:class="{'list-item read': item.is_view, 'list-item': !item.is_view">
----<!--其他复杂的逻辑判断-->
</div>

@yangxiongguo
@mufeng
@MaiCong

[MaiCong]

@ss098 去掉不必要的代码:

<div :class="{'list-item read': item.is_view>
----<!--其他复杂的逻辑判断-->
</div>

[MaiCong]

@ss098 手机打字，有点手抖
<div :class="{'read': item.is_view>
----<!--其他复杂的逻辑判断-->
</div>

[MaiCong]

=_=

<div :class="{'read': item.is_view}">
----<!--其他复杂的逻辑判断-->
</div>