vue不同的类型绑定不同的类名 第一种
<div v-for="(item, index) in list" :key="index" > <div class="item-tag" :class="addclassName(item)"> {{ item.cont}} </div> </div> addclassName(mess) { switch (mess.type) { case 1001: return 'oncss'; case 1002: return 'offcss' } },
第二种，使用过滤器来处理这个问题
<div v-for="(item, index) in list" :key="index" > <div class="item-tag" :class="addclassName(item)"> {{ item.cont}} </div> </div> filters: { addclassName(i) { switch (mess.type) { case 1001: return 'oncss'; case 1002: return 'offcss' } } },
ps:这两种方式，在vue中都是可以的，但是在uni-app中却不允许这样去做的哈;
那么我们应该如何去处理这个问题了
<template> <view class="page-demo"> <view class="demo" v-for="(item,index) in listArr" :key="index" :class="{'aa': item.type==1001, 'bb': item.type==1002, 'cc':item.type==1003, 'dd':item.type==1004}"> {{item.cont }} </view> </view> </template> <script> export default { data() { return { listArr:[ {cont:"名称",type:1001}, {cont:"名称",type:1002}, {cont:"名称",type:1003}, {cont:"名称",type:1004} ] }; }, } </script>
