vue用一个方法设置class

wei_dan1129

于 2020-08-22 14:51:31 发布

阅读量420

点赞数

文章标签： vue js

本文链接：https://blog.youkuaiyun.com/wei_dan1129/article/details/108168303

版权

本文介绍了在Vue.js中如何使用方法动态地为组件添加或删除class。通过结合`v-bind:class`指令与数据属性，可以实现根据条件切换class。在组件的methods中定义相关函数，更新数据状态，从而影响视图层的class列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<i class="icon" :class="getActivityClass(item)"</i>
getActivityClass : function(item){
     let className='';
     switch (item.master) {
         case 'WRONG':
             className=`error-${item.views.join(',')}`
             break;
         case 'RIGHT':
             className=`right-${item.views.join(',')}`
             break;
         case 'OTHER':
             className='other'
             break;
         default:
             className = 'no';
     }
     return {[className]:true};
 }

//或者
<div class="line-card" v-bind:class="{[`col-${line.width}`]:line.width}">/div>