问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue 根据不同值赋不同class

头像
claire
    3631119

    代码如下：

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

    想根据scope.row.status的值（-1——6），分别对应给span 赋7个不同的classname，status的值和classname是一一对应关系，有什么简便的写法吗？

    vue.js
    阅读 7.7k
    5 个回答
    得票最新
    头像
    不可能的是
      2.3k189
      ✓ 已被采纳

      提供比较简单的一个：

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

<script>

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

<style>
   .c1{}
    .c2{}
</style>
      头像
      罗高
        7096

        既然你的scope.row.status的值是-1——6 那可以就直接写成 :class="'某某前缀' + ${scope.row.status} "
        然后你的像是表里 定义7个这样规则的class就行了

        头像
        我养了一窝汪汪
          9741517

          写一个方法

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

          然后在html里面

          <div ：class="test(scope.row.status)"></div>
          头像
          陌路凡歌
            7.9k21119

            简便的话用数组

            <!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>
            头像
            maimai123
              4413

              如果你是想根据不同的状态呈现不同的颜色或者其他需求，并且想规范一点的话，你可以写个方法：
              如下所示：

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

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

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题