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