vue之根据不同的值绑定不同的class样式类名
需求描述有时候,我们需要根据不同的数据,来展示不同的效果。解决方式方法一: 使用绑定函数返回值实现定义好需要的样式:.online {color: #07c160;font-weight: bold;}.offline {color: #ff976a;font-weight: bold;}<divv-for="(item, index) in list":key="index"class="
·
需求描述
有时候,我们需要根据不同的数据,来展示不同的效果。
解决方式
方法一: 使用绑定函数返回值实现
定义好需要的样式:
.online {
color: #07c160;
font-weight: bold;
}
.offline {
color: #ff976a;
font-weight: bold;
}
<div
v-for="(item, index) in list"
:key="index"
class="item-wrap"
>
<div class="item-name">{{ item.name }}</div>
<div class="item-tag" :class="addClass(item.status)">
{{ item.status | typeFilter }}
</div>
</div>
在methods中定义addClass函数
addClass(i) {
switch (i) {
case 0:
return 'online';
case 1:
return 'offline'
}
},
方法二: 利用filters实现
<div
v-for="(item, index) in list"
:key="index"
class="item-wrap"
>
<div class="item-name">{{ item.name }}</div>
<div class="item-tag" :class="item.status | classFilter">
{{ item.status | typeFilter }}
</div>
</div>
然后在filters中定义
filters: {
classFilter(i) {
switch (i) {
case 0:
return 'online';
case 1:
return 'offline'
}
}
},
更多推荐
已为社区贡献28条内容
所有评论(0)