快捷導(dǎo)航

vue表單中遍歷表單操作按鈕的顯示隱藏示例

更新時(shí)間：2019年10月30日 11:09:06 作者：xie123aaa

今天小編就為大家分享一篇vue表單中遍歷表單操作按鈕的顯示隱藏示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

使用情況，vue中返回的數(shù)據(jù)循環(huán)遍歷如果用到v-if時(shí)不能直接賦值true 或者false，要true 或者false push到數(shù)組里面，隱藏或顯示時(shí)用 splice方法。

以下是詳情

1. 第一步先在data中定義數(shù)組

data () {
 return {
  passSaveShow: [], // 通行組保存和取消的顯示隱藏
  passEditShow: [], // 通行組編輯的顯示隱藏
  checkedUnLink: [], // 取消關(guān)聯(lián)是否選中
  valDate: [], // 有效期顯示
  pickDateShow: [], // 日期插件隱藏
  linkedValue: [],
  showImg: false, // 是否放大圖片
  imgSrc: '', // 圖片的路徑
  checkName: '', // 輸入姓名關(guān)鍵字
  checked: false,
  checkLists: [],
  checkPage: {
   page: 1,
   count: 2,
   total: 0
  }
 };
}

2.頁面中使用

<td>
 <i v-if="passEditShow[index]" @click="editValDate(index)" title="編輯" class="el-icon-edit-outline"></i>
 <div class="passSave" v-if="passSaveShow[index]">
  <i @click="passSaveDate(index)" title="保存提交" class="el-icon-circle-check"></i>&nbsp;
  <i @click="passCancel(index)" title="取消" class="el-icon-circle-close"></i>
 </div>
</td>

3.重要的一步，push到數(shù)組中

// 初始化加載數(shù)據(jù)
mounted () {
 let groupId = this.$props.perGroupInfo.id;
 let page = 1;
 let count = this.checkPage.count;
 let expired = 0;
 console.log(groupId);
 let url = `api/groupemp/linked?page=${page}&count=${count}&groupId=${groupId}&expired=${expired}`;
 this.$https.get(url).then(res => {
  console.log('查看初始化數(shù)據(jù)');
  console.log(res);
  console.log(res.data.data);
  console.log('查看初始化數(shù)據(jù)尾');
  this.checkLists = res.data.data;
  this.checkPage.total = res.data.Total;
  this.checkLists.forEach((item, index) => {
   this.valDate.push(true);
   this.pickDateShow.push(false);
   this.passSaveShow.push(false);
   this.passEditShow.push(true);
  });
 }).catch(err => {
  console.log('查看初始化數(shù)據(jù)報(bào)錯');
  console.log(err);
 });
},

4.更改按鈕的顯示隱藏，使用splice ,不能直接更改

// 修改有效期
editValDate (val) {
 this.passEditShow.splice(val, 1, false);
 this.passSaveShow.splice(val, 1, true);
 this.valDate.splice(val, 1, false);
 this.pickDateShow.splice(val, 1, true);
 // console.log(this.valDate[val]);
 // console.log(this.pickDateShow[val]);
},

以上這篇vue表單中遍歷表單操作按鈕的顯示隱藏示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

總結(jié)4個方面優(yōu)化Vue項(xiàng)目
在本篇文章里我們給大家整理了一篇關(guān)于優(yōu)化VUE項(xiàng)目的四個總要點(diǎn)，對此有需要的朋友們學(xué)習(xí)下天。
2019-02-02
使用vue.js寫一個tab選項(xiàng)卡效果
Vue 實(shí)現(xiàn) Tab切換實(shí)現(xiàn)的場景很多，比如，利用vue-router、利用第三方插件、利用組件等等.本文使用組件來實(shí)踐tab選項(xiàng)卡
2017-03-03
Vue Router路由守衛(wèi)超詳細(xì)介紹
路由守衛(wèi)，簡單理解來說就是，當(dāng)用戶要進(jìn)行一些操作時(shí)，我需要用戶的一些信息或數(shù)據(jù)或行為，我判斷過后，才會同意用戶進(jìn)行操作，說到這里，我想大家心里都或多或少有點(diǎn)理解了吧
2023-01-01
vue中render函數(shù)的使用詳解
這篇文章主要介紹了vue中render函數(shù)的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
Vue如何在CSS中使用data定義的數(shù)據(jù)淺析
這篇文章主要給大家介紹了關(guān)于Vue如何在CSS中使用data定義的數(shù)據(jù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-05-05
Vue3全局配置Axios并解決跨域請求問題示例詳解
axios 是一個基于promise的HTTP庫,支持promise所有的API,本文給大家介紹Vue3全局配置Axios并解決跨域請求問題,內(nèi)容從axios部署開始到解決跨域問題,感興趣的朋友一起看看吧
2023-11-11
vue3.x中apollo的使用案例代碼
這篇文章主要介紹了vue3.x中apollo的使用,通過前端自身直接獲取到apollo的配置目前看到官方支持的客戶端是沒有vue的，本文給大家介紹了前端獲取到apollo數(shù)據(jù)的過程，需要的朋友可以參考下
2023-02-02
Vue2中使用自定義指令實(shí)現(xiàn)el-table虛擬列表的代碼示例
在實(shí)際開發(fā)中,我們可能會面臨其他需求,例如在 el-table 中無法使用分頁技術(shù)的情況下展示海量數(shù)據(jù),這種情況下,頁面可能會出現(xiàn)卡頓,嚴(yán)重時(shí)甚至可能引發(fā)瀏覽器崩潰,所以針對這個問題本文給大家介紹了vue2中使用自定義指令實(shí)現(xiàn)el-table虛擬列表,需要的朋友可以參考下
2025-01-01
swiper在vue中的簡單使用方法
Swiper常用于移動端網(wǎng)站的內(nèi)容觸摸滑動,Swiper是純javascript打造的滑動特效插件,面向手機(jī)、平板電腦等移動終端,下面這篇文章主要給大家介紹了關(guān)于swiper在vue中的簡單使用方法,需要的朋友可以參考下
2022-09-09
在Vue mounted方法中使用data變量詳解
今天小編就為大家分享一篇在Vue mounted方法中使用data變量詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11