vue 绑定多个样式问题

我想要达到的结果

动态绑定多个样式，且不互斥。

  <tr>
              <td v-for="(itme,index) in Store.Alldata" :key="itme">
                <div :class="{active:bb==index,curr:cc==index}" @click='res(itme,index)'>
                  <span>{{itme.S}}span>
                  <span>{{itme.Z}}span>
                  <span >{{itme.N}}span>
                  <span>{{itme.C}}span>

动态绑定两个样式，这时候从span标签后面一直到整个组件结束，后面的代码全是白色的，正常运行，但是后面再写代码就没有提示了，总觉得有bug。

img

如果只是单一的绑定一个样式，比如：

bb==index?'active':''

img

这样代码是正常的高亮，再写代码也正常。

要怎么绑定两个属性，代码看起来才是正常的高亮样式，或者说如何更好的绑定两个样式属性？

img


:class="[bb==index?'active':'',cc==index?'vv':'']"

这样是可以的

或者 

:class="bb==index&&cc==index?['active','vv']:bb==index?'active':cc==index?'vv':''"

img

定义一个方法也行

哦我试了一下 没问题 你的代码

都在教你改代码，可是你的代码没有问题，有问题的是插件，应该是vetur的问题，可以到他们的issues上提一提你的问题，找一找有没有类似问题。
暂时的可以像上面说的修改写法，或者重启下编辑器


:class=“[{active:bb==index},{curr:cc==index}]”

也可以将样式的class这样写：把逻辑写在js中肯定不会出现你上面的问题，而且js中的代码更加灵活。


<body>
    <div id="vue-container">
        <div :class="classes(1)">
        </div>
    </div>
    <script>
        let vue = new Vue({
            el: "#vue-container",
            data: {
                bb: '1',
                cc: '1'
            },
            computed: {
                classes(){
                    return function(index){
                        return {
                            'active': this.bb == index,
                            'curr': this.cc == index,
                        }
                    }
                }
            },
            methods:{

            },
        });
    </script>

</body>

方法一


:class="[a:"a1",b:"b1"]"

a变量ture显示 a1
方法二

this.classList = ["a1","a2"]
:class="this.classList.join(" ")"

【013_末晨曦Vue技术_Class和Style绑定之绑定内联样式-哔哩哔哩】 https://b23.tv/yiyofJn


:class=“[{active:bb==index},{curr:cc==index}]”
:class="[bb==index?'active':'',cc==index?'vv':'']"