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.页面中使用

<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到数组中

// 初始化加载数据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

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

感谢各位的阅读，以上就是“vue如何遍历表单操作按钮的显示隐藏”的内容了，经过本文的学习后，相信大家对vue如何遍历表单操作按钮的显示隐藏这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！