快捷導(dǎo)航

vue如何實(shí)現(xiàn)動(dòng)態(tài)的選中狀態(tài)切換效果

更新時(shí)間：2022年04月30日 11:11:59 作者：黑暗中跳舞的月亮

這篇文章主要介紹了vue如何實(shí)現(xiàn)動(dòng)態(tài)的選中狀態(tài)切換效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

動(dòng)態(tài)選中狀態(tài)切換效果

HTML中的內(nèi)容為以下。

<ul class="list">
? ? ?<li v-for="(item,index) in liList" v-on:click="addClass(index)" v-bind:class="{?
? ? ? ? ?ischeck:index==current}">{{item.title}}</li>
</ul>

JS中的內(nèi)容為以下。

data () {
? ? return {
? ? ? ? ? ? current:0,
? ? ? ? ? ? liList:[
? ? ? ? ? ? ? ? {title:'中國(guó)'},
? ? ? ? ? ? ? ? {title:'美國(guó)'},
? ? ? ? ? ? ? ? {title:'英國(guó)'},
? ? ? ? ? ? ? ? {title:'法國(guó)'}
? ? ? ? ? ? ]
? ? }
},
methods:{?? ?
? ? addClass:function(index){
? ? ? ? ? this.current=index
? ? }
} ?

CSS中的內(nèi)容如下。

.ischeck ?{
? ? background: #e6e6e6;
? ? height: 30px;
? ? width: 50px;
? ? line-height: 0px;
? ? padding: 15px 10px;
}

vue狀態(tài)轉(zhuǎn)換

狀態(tài)展示

第一種方法

<el-table-column prop="sfgh" label="是否歸還" align="center">
? ? ? ? ? ? ? ? <template scope="scope">
? ? ? ? ? ? ? ? ? ? <p v-if="scope.row.sfgh=='0'">
? ? ? ? ? ? ? ? ? ? ? ? <el-button ?href="javascript:void(0)" @click="getWzghInfo(scope.$index, scope.row)">已歸還</el-button>
? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? ? ? <p v-if="scope.row.sfgh=='1'">未歸還</p>
? ? ? ? ? ? ? ? ? ? <p v-if="scope.row.sfgh=='2'">未還清</p>
? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? </el-table-column>

第二種方法

使用formatter來(lái)實(shí)現(xiàn)

代碼如下：

<el-table-column label="狀態(tài)" :formatter="statusFormat">
</el-table-column>
 
methods: {
     statusFormat: function(row, column) {
        let status = row.status;
        let statusW = "未繳費(fèi)";
        if(status == undefined) {     
              statusW = "未繳費(fèi)";     
        }  
       switch(status) {
           case 1:
           statusW = "已繳費(fèi)";
           break;
          case 2:
          statusW = "退款申請(qǐng)中";
          break;
     }
       return statusW;
 }
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue插件之滑動(dòng)驗(yàn)證碼
這篇文章主要為大家詳細(xì)紹介紹了Vue插件之滑動(dòng)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
vue{{}}拼接字符串和換行符方式
這篇文章主要介紹了vue{{}}拼接字符串和換行符方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12
windows下vue-cli導(dǎo)入bootstrap樣式
這篇文章主要介紹了windows下vue-cli導(dǎo)入bootstrap樣式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-04-04
父組件中vuex方法更新state子組件不能及時(shí)更新并渲染的完美解決方法
這篇文章主要介紹了父組件中vuex方法更新state子組件不能及時(shí)更新并渲染的完美解決方法,需要的朋友可以參考下
2018-04-04
vue3如何用pinia替代vuex
這篇文章主要介紹了vue3如何使用pinia替代vuex問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
VSCode中寫Vue沒有代碼提示的解決步驟(附圖文)
這篇文章主要給大家介紹了關(guān)于VSCode中寫Vue沒有代碼提示的解決步驟,代碼提示功能能夠大大的提高開發(fā)效率,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-09-09
Vue動(dòng)態(tài)樣式綁定實(shí)例詳解
眾所周知vue是操作dom元素的,那么如果有元素要?jiǎng)討B(tài)綁定樣式,這種需求,還是要通過改變數(shù)據(jù)來(lái)改變視圖的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)樣式綁定的相關(guān)資料,需要的朋友可以參考下
2023-04-04
vue的三種圖片引入方式代碼實(shí)例
這篇文章主要介紹了vue的三種圖片引入方式代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-11-11
vue:axios請(qǐng)求本地json路徑錯(cuò)誤問題及解決
這篇文章主要介紹了vue:axios請(qǐng)求本地json路徑錯(cuò)誤問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue element封裝form表單的實(shí)現(xiàn)
本文主要介紹了vue element封裝form表單的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06