改變前?

?改變后

通過數據來控制樣式展示?

<template><div>通過num控制圖標是否更改{{num}}<div class="box"><!-- 如果num大于1則是另一種，樣式，如果小時1，則是另一種樣式 --><div class="item" :class="num > 1 ? 'noClick' :''" v-for="(item,index) in menuData" :key="index"><div class="img" :class="item.icon"></div><div class="content">{{item.name}}</div><div class="arrow"><img src="../assets/evaluateOthers/role-arrow.png" alt=""></div></div></div></div>
</template><script>
export default {data () {return {num: 10,menuData: [{name: '學不會1',icon: 'other'},{name: '學不會2',icon: 'my'},{name: '學不會3',icon: 'people'},{name: '學不會4',icon: 'shaicha'}]}}
}
</script><style lang="less" scoped>
.box {padding: 20px;
}
.item {background: #ffffff;box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.11);border-radius: 4px;width: 100%;margin-bottom: 16px;padding: 18px 17px 18px 20px;box-sizing: border-box;display: flex;align-items: center;position: relative;
}
.img {width: 44px;height: 44px;margin-right: 17px;&.other {background: url('../assets/evaluateOthers/other-icon.png') no-repeat center;background-size: 44px;}&.my {background: url('../assets/evaluateOthers/my-icon.png') no-repeat center;background-size: 44px;}&.people {background: url('../assets/evaluateOthers/people-icon.png') no-repeat center;background-size: 44px;}&.shaicha {background: url('../assets/evaluateOthers/shaicha.png') no-repeat center;background-size: 44px;}
}
// 符合條件后帶的樣式
.noClick {.img {&.other {background: url('../assets/evaluateOthers/no-other-icon.png') no-repeatcenter;background-size: 44px;}&.my {background: url('../assets/evaluateOthers/wartfor.png') no-repeat center;background-size: 44px;}&.people {background: url('../assets/evaluateOthers/people-icon.png') no-repeatcenter;background-size: 44px;}&.shaicha {background: url('../assets/evaluateOthers/shaicha.png') no-repeat center;background-size: 44px;}}
}
.arrow {position: absolute;right: 14px;top: 50%;transform: translate(0, -50%);
}
</style>