现在有如下数据:
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 中创建一个数据对象,但是我这里有一个列表,这可能就不太适用了。
请问大家,这个情况正确的解决方案是?
谢谢。
1
yangxiongguo 2016-10-10 14:08:43 +08:00 1
class={{item['is_view']?'classA':'classB'}}
大概这样可以吗?没实际跑过,就一个思路 |
2
mufeng 2016-10-10 14:11:42 +08:00 1
这样就好 :class="{'red': item.is_view}"
|
3
mufeng 2016-10-10 14:12:18 +08:00 1
@yangxiongguo 官方推荐 bind-class
|
4
MaiCong 2016-10-10 14:15:32 +08:00 via iPhone 1
:class="{'read': item.is_view === true}"
|
5
ss098 OP 非常感谢各位菊苣,问题已经解决,代码如下:
<div v-bind:class="{'list-item read': item.is_view, 'list-item': !item.is_view"> ----<!--其他复杂的逻辑判断--> </div> @yangxiongguo @mufeng @MaiCong |
6
MaiCong 2016-10-10 20:49:35 +08:00 via iPhone
|
7
MaiCong 2016-10-10 20:50:34 +08:00 via iPhone
|
8
MaiCong 2016-10-10 20:51:33 +08:00 via iPhone 1
=_=
<div :class="{'read': item.is_view}"> ----<!--其他复杂的逻辑判断--> </div> |