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>