vue中v-bind使用三目运算符绑定class

2024年2月22日 185次阅读 来源: 肖雅峰 
<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>

 

    原文作者：肖雅峰
    原文地址: https://blog.csdn.net/xyf13920745534/article/details/104045436
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞