vue表单中如何遍历表单操作按钮的显示隐藏

这篇文章主要介绍"vue表单中如何遍历表单操作按钮的显示隐藏"，在日常操作中，相信很多人在vue表单中如何遍历表单操作按钮的显示隐藏问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"vue表单中如何遍历表单操作按钮的显示隐藏"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

1. 第一步先在data中定义数组

data () { return {  passSaveShow: [], // 通行组保存和取消的显示隐藏  passEditShow: [], // 通行组编辑的显示隐藏  checkedUnLink: [], // 取消关联是否选中  valDate: [], // 有效期显示  pickDateShow: [], // 日期插件隐藏  linkedValue: [],  showImg: false, // 是否放大图片  imgSrc: '', // 图片的路径  checkName: '', // 输入姓名关键字  checked: false,  checkLists: [],  checkPage: {   page: 1,   count: 2,   total: 0  } };}

2.页面中使用

3.重要的一步，push到数组中

// 初始化加载数据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('查看初始化数据');  console.log(res);  console.log(res.data.data);  console.log('查看初始化数据尾');  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('查看初始化数据报错');  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表单中如何遍历表单操作按钮的显示隐藏"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！