鍍金池/ 問答/HTML/ vue 根據(jù)不同值賦不同class

vue 根據(jù)不同值賦不同class

代碼如下：

<span :class="{}">{{scope.row.status | formatOrderStatus}}</span>

想根據(jù)scope.row.status的值（-1——6），分別對應(yīng)給span 賦7個不同的classname，status的值和classname是一一對應(yīng)關(guān)系，有什么簡便的寫法嗎？

回答
編輯回答
薔薇花

寫一個方法

test (i) {
    switch (+i) {
        case -1:
            return 'class1'
            ...
    }
}

然后在html里面

<div ：class="test(scope.row.status)"></div>
2017年10月2日 00:23
編輯回答
絯孑氣

如果你是想根據(jù)不同的狀態(tài)呈現(xiàn)不同的顏色或者其他需求，并且想規(guī)范一點(diǎn)的話，你可以寫個方法：
如下所示：

test (status) {
    switch (+status) {
        case -1:
            return 'colorRed'
            ...
    }
}

<div :class="test(scope.row.status)"></div>

2018年8月25日 04:12
編輯回答
傻叼

提供比較簡單的一個：

 :class="'某某前綴' + array[scope.row.status+1]"

<script>

  data() {
    return {
      array: [c1, c2, c3]
      }
  }
</script>

<style>
   .c1{}
    .c2{}
</style>
2017年12月3日 21:34
編輯回答
裸橙

既然你的scope.row.status的值是-1——6 那可以就直接寫成 :class="'某某前綴' + ${scope.row.status} "
然后你的像是表里 定義7個這樣規(guī)則的class就行了

2017年11月7日 05:36
編輯回答
放開她

簡便的話用數(shù)組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">
            <div v-for="(item,index) in items" >
                    <h1 :class="addclass(item.status)">111</h1>
                </div>
    </div>
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>

var app=new Vue({
    el:'#box',
    data:{
        items:[{status:'-1'},{status:'0'},{status:'1'},{status:'2'},{status:'3'},{status:'4'}]
    },
    methods: {
        addclass:function(i){
            var arr = ['b','c','d','e','f'];
            if(i==-1){
                return 'a'
            }else{
                return arr[i];
            }
        }
    }
});
    </script>
</body>
</html>
2017年4月13日 05:00