vue中v-bind使用三目運算符綁定class

<template>
  <div>
    <!-- 外邊框的樣式 -->
    <div :class="projectStatus === 2?outlineDelay:outline" @click="clickProject(userProjectId)">
      <!-- 延期 -->
        <div v-if="projectStatus === 2" class="delay">{{delay}}</div>
      <!-- 圖片樣式 -->
        <div><img class="picture item" :src="pictureName" /></div>
        <!-- 項目名稱 -->
        <div class="projectName">{{ projectName | ellipsis }}</div>
      <!-- 項目人 -->
      <div class="userName">
        {{ gradeName }}
      </div>
    </div>
  </div>
</template>

data () {
    return {
      delay: '延期', // 延期狀態顯示的字段
      outline: 'outline', // 非延期狀態的外邊框樣式
      outlineDelay: 'outlineDelay' // 延期狀態的外邊框樣式
    }
  },

<style scoped>
/* 外邊框樣式 */
.outline {
  width: 350px;
  height: 90px;
  margin-left:10px;
  margin-top: 15px;
  background-color: white;
  border: 1px solid gray;
  border-radius: 10px;
}
/* 延期狀態下的外邊框樣式 */
.outlineDelay{
   width: 350px;
  height: 90px;
  margin-left:10px;
  margin-top: 15px;
  background-color: white;
  border: 1px solid gray;
  border-radius: 10px;
  background: linear-gradient(45deg, transparent 88%, red 0%);
  border-top-right-radius: 10px
}
/* 圖片的樣式 */
.picture {
  height: 50px;
  width: 50px;
  margin-left: 0.48rem;
  margin-top:6px;

}
/* 項目名稱的樣式 */
.projectName {
  font-size: 15px;
  margin-left:90px;
  margin-right: 10px;
  margin-top:-40px;
  text-align: center;
}
/* 項目人的樣式 */
.userName {
  font-size: 15px;
  margin-left: 10px;
  margin-top:20px;
}
/* 延期字段的樣式 */
.delay {
  color:white;
  float:right;
  margin-right: 6px;
  margin-top:4px;

}
</style>