vue 實現點擊選中div 右下角顯示對號√

效果圖：

<div class="" style="display: flex;"><div class="item" :class="activeKey === 0 ? 'select' : ''" @click="activeKey = 0"><div class="shift">早班 8：00 - 20：00</div><div class="">2022年07月18日</div></div><div class="item" :class="activeKey === 1 ? 'select' : ''" @click="activeKey = 1"><div class="shift">晚班 20：00 - 8：00</div><div class="">2022年07月18日</div></div> </div> .item {border: 1px #AAAAAA solid;padding: 1vh 1vw;border-radius: 5px;margin: 1vh 1vw;}.shift {font-weight: 600;margin-bottom: 10px;}.select {position: relative;text-align: left;color: #00aaff;background-color: #fff;box-shadow: 0px 2px 7px 0px rgba(85, 110, 97, 0.35);border-radius: 5px;border: 1px solid #00aaff;}.select:before {content: '';position: absolute;right: 0;bottom: 0;border: 10px solid #00aaff;border-top-color: transparent;border-left-color: transparent;}.select:after {content: '';width: 4px;height: 6px;position: absolute;right: 4px;bottom: 3px;border: 2px solid #fff;border-top-color: transparent;border-left-color: transparent;transform: rotate(45deg);}border-left-color: transparent;transform: rotate(45deg);}

總結

以上是生活随笔為你收集整理的vue 实现点击选中div后， 右下角显示对号√的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。