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