快捷導(dǎo)航

vue如何實現(xiàn)點擊選中取消切換

更新時間：2022年05月31日 16:49:10 作者：猩猩點點

這篇文章主要介紹了vue實現(xiàn)點擊選中取消切換，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue點擊選中取消切換

html

<el-button @click="searchStatisticsInfo(item)" :class="item.isChoose == true ? 'active' : ''" size="small" v-for="(item,index) in menulist" :key="index">{{item.name}}</el-button>

data

menulist: [{
  id: 1,
    isChoose: true,
    name: '今天'
  }, {
    id: 2,
    isChoose: false,
    name: '近七天'
  }, {
    id: 3,
    isChoose: false,
    name: '近30天'
  }, {
    id: 4,
    isChoose: false,
    name: '近90天'
  }],

JS

? methods: {
? ? searchStatisticsInfo (item) {
? ? ? for (let item of this.menulist) {
? ? ? ? item.isChoose = false;
? ? ? }
? ? ? item.isChoose = !item.isChoose;
? ? }
?}

如果數(shù)組中不包含isChoose 則需要改成$set的方式。

?searchStatisticsInfo (item) {
? ? ? for (let row of this.menulist) {
? ? ? ? this.$set(row, "isChoose", false);
? ? ? }
? ? ? this.$set(item, "isChoose", true);
? ? },

vue點擊選中,再次點擊取消

舉個栗子

在el-calendar中單擊選中，再次點擊取消選中

可以定義一個變量，用他的值作為判斷，如果與點擊日期相等，就是取消選中

// 點擊查詢當(dāng)天記錄
? ? handleHoliday(date, data) {
? ? ? const { day } = data;
? ? ? if (this.clickTime === day) { ? ? ?//定義變量clickTime
? ? ? ? this.findWorkList(this.currentDate);
? ? ? ? this.findList(this.currentDate);
? ? ? ? this.clickTime = ""; ? //再次賦值為空，才能連續(xù)點擊
? ? ? ? return;
? ? ? } else {
? ? ? ? this.clickTime = day; ? ? //不可用date做比較，date是變化的值
? ? ? ? ? this.findWorkList(this.currentDate, day);
? ? ? ? ? this.findList(this.currentDate, day)
? ? ? ? }
? ? ? }
? ? },

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

您可能感興趣的文章:

相關(guān)文章

VUE?axios每次請求添加時間戳問題
這篇文章主要介紹了VUE?axios每次請求添加時間戳問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
詳解vue2父組件傳遞props異步數(shù)據(jù)到子組件的問題
本篇文章主要介紹了vue2父組件傳遞props異步數(shù)據(jù)到子組件的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
使用Element+vue實現(xiàn)開始與結(jié)束時間限制
這篇文章主要為大家詳細介紹了使用Element+vue實現(xiàn)開始與結(jié)束時間限制，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
Vue的事件響應(yīng)式進度條組件實例詳解
這篇文章主要介紹了Vue的事件響應(yīng)式進度條組件的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2018-02-02
詳解vue項目中實現(xiàn)圖片裁剪功能
這篇文章主要介紹了vue項目中實現(xiàn)圖片裁剪功能，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
vue在body和query中如何向后端傳參
這篇文章主要介紹了vue在body和query中如何向后端傳參，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
:visible.sync 的作用詳解
我們在前端開發(fā)中經(jīng)?？吹?visible.sync這種修飾符，很多人不知道這是干什么的，在使用ElementUI的時候，里面有個彈窗el-dialog組件的時候會有用到:visible.sync，今天小編帶領(lǐng)大家學(xué)習(xí)下:visible.sync 的作用，感興趣的朋友一起看看吧
2022-11-11
Vue3+TS項目中eslint、prettier安裝配置詳細指南
為了更好的統(tǒng)一項目的代碼風(fēng)格,因此在編寫時就可以使用eslint+prettier,它們不僅能方便代碼編寫,還能避免不必要的錯誤,讓代碼變得更加嚴謹,這篇文章主要給大家介紹了關(guān)于Vue3+TS項目中eslint、prettier安裝配置的相關(guān)資料,需要的朋友可以參考下
2024-07-07
Vue3中從一個頁面(index)傳輸數(shù)值到另一個頁面(form)的方法詳解
在 Vue 3 開發(fā)中,經(jīng)常需要在不同組件或頁面之間傳遞數(shù)據(jù),例如從 index 頁面獲取某個數(shù)值（如 cntr、tradeId）后,將其傳輸?shù)?nbsp;form 頁面進行填寫或編輯,本文將介紹幾種常見的數(shù)據(jù)傳輸方法,并為每種方法提供一個小的 Demo 代碼示例,需要的朋友可以參考下
2025-02-02
Vue組件基礎(chǔ)操作介紹
這篇文章主要介紹了Vue組件基礎(chǔ)操作，組件是vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互進行直接的引用
2023-01-01