vue.js - vue中怎么根据传入的数据中的类型来动态设置class

问题描述

问 题

我是在页面中用script标签引入的，
<!--<div class="timeBar" :class="[ {'gray-bg': data.Type==0}, {'blue-bg': data.Type==1}, {'green-bg': data.Type==2}]">-->
<div class="timeBar" :class="timeBarType(data.Type)">

在实例中用来计算属性，但是html结构上的timeBarType要求是一个对象不能是function，上面被注释掉的可以，但是我觉的太繁琐来，
computed: {

    timeBarType: function (type) {
        if(type == 0) return 'gray-bg';
        if(type == 1) return 'blue-bg';
        if(type == 2) return 'green-bg';

    }
},

解决方案

timeBarType写在methods中，根据传入的参数返回classname

这篇关于vue.js - vue中怎么根据传入的数据中的类型来动态设置class的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！