（14）:class用法

旧城等待， 2023-02-09 11:51 12阅读 0赞

比如编辑页面和查看页面，内容都是一样的，这时候可以设置一个状态来区分，通过这个状态变量来给编辑处加上class，这个class通过css来控制前端的权限，而不用写两个页面；再比如审核页面，需要查看哪些内容被修改过，修改过而未审核的标红，也可以设置统一的css。语法为：

:class = "{className1:(条件1),className2:(条件2)}"

其中，className可以加上''，也可以不加引号。

例：

<template>
      <div>
        <div>
          <el-select v-model="editSatus" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
    
        <div>
          <el-form>
            <el-input
              v-model="redtext"
              :class="{'my-disabled':(editSatus === false)}"
            ></el-input>
          </el-form>
    
          <div v-for=" item in colors" :key="item">
                 <span  :class="{'mytrue':(obj[`my${item}Change`] === 1),myred:(item === 'redtext')}">{
       {item}}</span>
                
          </div>
    
          
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data() { 
        return {
            colors:['redtext','greentext','yellowtext'],
          redtext: "redtext",
          greentext: "greentext",
          yellowtext: "yellowtext",
          myredtextChange:1,
          obj:{ myredtextChange:1,
          mygreentextChange:0},
          //是否可以编辑，默认可以
          editSatus: true,
          options: [
            {
              value: true,
              label: "编辑"
            },
            {
              value: false,
              label: "查看"
            }
          ]
        };
      },
      methods: {
          getText(item){
              let val = 'my'+item+'Change';
             
              
              return this.obj.myredtextChange;
          }
      }
    };
    </script>
    <style lang="scss">
    .my-disabled {
      pointer-events: none;
    }
    .myred {
        color:  red;
      .ivu-input.ivu-input-default {
        color: red;
      }
      .ivu-select.ivu-select-single.ivu-select-default {
        color: red;
      }
      textarea {
        color: red;
      }
      .ivu-form-item-label {
        color: red;
      }
    }
    .mytrue{
        font-style:oblique
    }
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70][]

![20200518175700235.png][]

再如删除某行页面上以中划线表示并字体标红：

<el-table-column label="项目合同金额">
                  <template slot-scope="scope">
                    <span
                      :style="{color:(scope.row.status==2) ? 'red' : '#007bd9',
                          'text-decoration': (scope.row.status==2) ? 'line-through' : 'none'}"
                    >{
       {scope.row.projectMoney}}</span>
                  </template>
                </el-table-column>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200518175647549.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k=,size_16,color_FFFFFF,t_70
[20200518175700235.png]: https://img-blog.csdnimg.cn/20200518175700235.png