（14）:class用法

比如编辑页面和查看页面，内容都是一样的，这时候可以设置一个状态来区分，通过这个状态变量来给编辑处加上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>

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

<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>