需求：默認升序，懸浮按鈕變色，點擊按鈕下標跟隨變化。

?

html

<div class="right"@click="change(item,index)"v-for="(item, index) in btnList":key="index">{{item.lable}}<div class="box-icon"><div class="up":class="item.status === 1 ? 'opacity-5' : ''"></div><div class="down":class="item.status === 1 ? 'opacity-1' : ''"></div></div></div>

js

data(){return{btnList: [{ lable: "更新時間", status: 0 },{ lable: "訪問量", status: 0 },{ lable: "申請量", status: 0 },],} }, methods:{change(item, index) {this.btnList[index].status === 0? (this.btnList[index].status = 1): (this.btnList[index].status = 0);} }

css

.right {padding: 0 20px;height: 32px;color: #505363;font-weight: 400;font-size: 14px;margin-left: 10px;border: 1px solid rgb(233, 231, 231);display: flex;justify-content: center;line-height: 32px;cursor: pointer;}.right:hover {color: #217aff;border: 1px solid #217aff;.up {border-bottom: 6px solid #217aff;}.down {border-top: 6px solid #217aff;}}.opacity-5 {opacity: 0.5;}.opacity-1 {opacity: 1 !important;}.box-icon {height: 30px;margin-top: 7px;.up {width: 0px; /*設置寬高為0，所以div的內(nèi)容為空，從才能形成三角形尖角*/height: 0px;border-bottom: 6px solid #a3a5b3;border-left: 4px solid transparent; /*transparent 表示透明*/border-right: 4px solid transparent;margin-bottom: 4px;}.down {width: 0px;height: 0px;opacity: 0.5;border-top: 6px solid #a3a5b3;border-left: 4px solid transparent;border-right: 4px solid transparent;}}.box-icon div {height: 10px;margin-left: 4px;}

總結(jié)

以上是生活随笔為你收集整理的vue升序降序按钮功能实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。