vue如何實現(xiàn)動態(tài)的選中狀態(tài)切換效果
更新時間：2022年04月30日 11:11:59 作者：黑暗中跳舞的月亮
這篇文章主要介紹了vue如何實現(xiàn)動態(tài)的選中狀態(tài)切換效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
動態(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:'中國'},
? ? ? ? ? ? ? ? {title:'美國'},
? ? ? ? ? ? ? ? {title:'英國'},
? ? ? ? ? ? ? ? {title:'法國'}
? ? ? ? ? ? ]
? ? }
},
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來實現(xiàn)
代碼如下：
<el-table-column label="狀態(tài)" :formatter="statusFormat">
</el-table-column>
methods: {
statusFormat: function(row, column) {
let status = row.status;
let statusW = "未繳費";
if(status == undefined) {
statusW = "未繳費";
}
switch(status) {
case 1:
statusW = "已繳費";
break;
case 2:
statusW = "退款申請中";
break;
}
return statusW;
}
}
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細紹介紹了Vue插件之滑動驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了vue{{}}拼接字符串和換行符方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了windows下vue-cli導入bootstrap樣式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
父組件中vuex方法更新state子組件不能及時更新并渲染的完美解決方法
這篇文章主要介紹了父組件中vuex方法更新state子組件不能及時更新并渲染的完美解決方法,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue3如何使用pinia替代vuex問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要給大家介紹了關(guān)于VSCode中寫Vue沒有代碼提示的解決步驟,代碼提示功能能夠大大的提高開發(fā)效率,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-09-09
眾所周知vue是操作dom元素的,那么如果有元素要動態(tài)綁定樣式,這種需求,還是要通過改變數(shù)據(jù)來改變視圖的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue動態(tài)樣式綁定的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue的三種圖片引入方式代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue:axios請求本地json路徑錯誤問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
本文主要介紹了vue element封裝form表單的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06