启用禁用字体真棒图标

Question

我有向下箭头字体很棒的图标。出于某些验证原因，我尝试禁用该图标。但是当我给出一个选项“禁用”时，它不起作用。

 <div class="arrow bounce text-center" >
     <div class="fa fa-arrow-circle-down fa-3x " style="padding-bottom: 2px;" disabled="disabled"></div>
</div>

 .arrow {
    text-align: center;
    margin:40px 0px;
}
.bounce {
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%,
    20%,
    30%,
    40%,
    50% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-30px);
    }
    50% {
        transform: translateY(-15px);
    }
}

我的代码有什么问题？

原文由 RKCY 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

VueJS 代码：使用 html：

 <div class="arrow bounce text-center" >
 <div class="fa fa-arrow-circle-down fa-3x " style="padding-bottom: 2px;" v-bind:style="disabled ? 'color: #b7b7b7' : '' " @click="toDoFunc()">

使用js，请勾选禁用I标签

toDoFunc: function() {
  if (!disabled ) {
   //to do if condition true
  }
},

原文由 Hai Nguyen Le 发布，翻译遵循 CC BY-SA 4.0 许可协议