<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點(diǎn)擊選中,再次點(diǎn)擊取消

舉個(gè)栗子

在el-calendar中單擊選中，再次點(diǎn)擊取消選中

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

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

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

您可能感興趣的文章:

相關(guān)文章

Element+Vue實(shí)現(xiàn)動(dòng)態(tài)表單多個(gè)下拉框組件功能
這篇文章主要介紹了Element+Vue實(shí)現(xiàn)動(dòng)態(tài)表單多個(gè)下拉框組件功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-07-07
vue動(dòng)態(tài)綁定v-model屬性名方式
這篇文章主要介紹了vue動(dòng)態(tài)綁定v-model屬性名方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue中函數(shù)防抖節(jié)流的理解及應(yīng)用實(shí)現(xiàn)
這篇文章主要介紹了Vue中函數(shù)防抖節(jié)流的理解及應(yīng)用實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
vue+elementui實(shí)現(xiàn)動(dòng)態(tài)添加行/可編輯的table
這篇文章主要為大家詳細(xì)介紹了vue+elementui實(shí)現(xiàn)動(dòng)態(tài)添加行/可編輯的table，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
詳解vue如何獲取當(dāng)前系統(tǒng)時(shí)間
這篇文章主要詳細(xì)介紹了vue如何獲取當(dāng)前系統(tǒng)時(shí)間,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-01-01
使用vue3重構(gòu)拼圖游戲的實(shí)現(xiàn)示例
這篇文章主要介紹了使用vue3重構(gòu)拼圖游戲的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
react router零基礎(chǔ)使用教程
React-Router 路由庫(kù)，是官方維護(hù)的路由庫(kù)，事實(shí)上也是唯一可選的路由庫(kù)。它通過(guò)管理 URL，實(shí)現(xiàn)組件的切換和狀態(tài)的變化，開發(fā)復(fù)雜的應(yīng)用幾乎肯定會(huì)用到
2022-09-09
Vue.js之slot深度復(fù)制詳解
這篇文章主要介紹了Vue.js之slot深度復(fù)制的相關(guān)資料，文中介紹的很詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們來(lái)一起看看吧。
2017-03-03
Vue 用Vant實(shí)現(xiàn)時(shí)間選擇器的示例代碼
這篇文章主要介紹了Vue 用Vant實(shí)現(xiàn)時(shí)間選擇器的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
使用Vue自定義指令實(shí)現(xiàn)Select組件
這篇文章主要介紹了使用Vue自定義指令實(shí)現(xiàn)Select組件,如果哪位朋友對(duì)vue自定義指令不是多了解的話，此篇文章會(huì)對(duì)你有所幫助的，需要的朋友可以參考下
2018-05-05