当前列表

  点击编辑,行变为编辑框。

  

<Row style="color:#999;margin-bottom:11px">
<Row style="margin-bottom:10px" v-for='(item,index) in jiujie' :key=item.name> <Row v-if='item.vis'>
<Col span="8">
{{item.name}}
</Col>
<Col span="2">
{{item.value}}
</Col>
<Col span="8" offset="6" style="vertical-align: middle">
<Button size='small' type="primary" @click='sdel(index)'>删除</Button>
&nbsp;
<Button size='small' @click="edits(item)">编辑</Button>
</Col>
</Row> <Row v-if='!item.vis'>
</form>
<Col span="8">
<Input style="width:75%" v-model='jiujie[index].name' />
<div class='sdiv' :id="forId(index)">请输入变量名</div>
</Col>
<Col span="2">
<Select v-model="valueSelect">
<Option value="普通变量">普通变量
</Option>
</Select>
</Col>
<Col span="6">
<Input style="width:75%" v-model='jiujie[index].value' />
</Col>
<Col span="8" style="vertical-align: middle">
<Button size='small' type="primary" @click='save(item,index)'>保存</Button>
&nbsp;
<Button size='small' @click="changevis(item,index)">取消</Button>
</Col>
</Row> </Row> <Row style="margin-top:15px">
<Col span="4" offset="8" style="color:#2db7f5 ;font-size:14px;">
<div style="cursor: pointer;" @click='addenvir'>
<Icon type="ios-add" />添加环境变量</div>
</Col>
</Row> </Row>

通过在循环的数组中对象中添加新的元素控制显示隐藏,

通过es6 map方法

this.envirconfig.map((item, index) => {

                            this.jiujie.push(Object.assign({}, item, {
vis: true,
})) });

验证的话是动态加入id,验证之后通过控制id添加样式

 forId: function (index) {
return "a" + index;
},
document.getElementById(id).style.display = 'block';

在vue中场景,循环行,点击当前行编辑数据的更多相关文章

  1. vue 如何在循环中 "监听" 的绑定v-model数据

    vue 如何在循环中 "监听" 的绑定v-model数据 阅读目录 vue 如何在循环中 "监听" 的绑定v-model数据 1. 普通属性的值进行监听 2. ...

  2. 在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??

    在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTic ...

  3. Vue--axios:vue中的ajax异步请求(发送和请求数据)、vue-resource异步请求和跨域

    跨域原理: 一.使用axios发送get请求 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 & ...

  4. vue中如何使用mockjs摸拟接口的各种数据

    mockjs的作用 生成模拟数据 模拟 Ajax 请求,返回模拟数据 基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...

  5. vue中解决拖动和点击事件的冲突

    BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup => ...

  6. 理解vue中v-for循环中得key原理及一些错误

    作用:给节点做一个标识,相当于人类的身份证号,虚拟DOM中的标识 下列是key值的一些使用场景和带来的问题:   js:    const vm = new Vue({             el: ...

  7. vue中遇到的一个点击展开或收起并且改变背景颜色的问题。

    <template> <div class="expense-center"> <div class="fl expense-left&qu ...

  8. vue中使用element写点击input内部标签(使用模态框传值)

    首先附上源码地址 https://files.cnblogs.com/files/maruihua/vue-tagsinput-master.zip 这个是我修改后的代码.取消了部分功能,添加的一些功 ...

  9. VUE中登录密码显示与隐藏的最简设计——基于iview

    目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...

随机推荐

  1. Macaca框架

    收藏 http://www.cnblogs.com/jinjiangongzuoshi/p/6537795.html

  2. hdu4975 A simple Gaussian elimination problem.(最大流+判环)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4975 题意:和hdu4888基本一样( http://www.cnblogs.com/a-clown/ ...

  3. Linux 系统管理命令 - free - 查看系统内存信息

    命令详解 重要星级: ★★★★★ 功能说明: free 命令用于显示系统内存状态,具体包括系统物理内存.虚拟内存.共享内存和系统缓存等. 语法格式: free [option] free [选项] 说 ...

  4. ubuntu mysql5.6二进制安装

    200 ? "200px" : this.width)!important;} --> 介绍 以前一直使用centos今天需要对一台ubantu的系统安装mysql,虽然它也 ...

  5. linux下系统调用劫持ioctl

    实验环境:linux 2.6.32   64位系统 采用lkm(动态加载内核模块)方式劫持ioctl系统调用,系统调用过程如图所示(以open为例子) 实验代码:(头文件有不需要的,但是懒得改了,在系 ...

  6. 洛谷P4891 序列

    传送门 这题纯暴力竟然能过…… //minamoto #include<cstdio> #include<iostream> #define mul(a,b) (1ll*a*b ...

  7. 洛谷P3642 [APIO2016]烟火表演

    传送门 题解 fy大佬好强……我根本看不懂…… //minamoto #include<bits/stdc++.h> #define ll long long using namespac ...

  8. C# 大文件上传

    IHttpModule 分块上传大文件 IHttpModule 分块上传大文件 来源:http://www.cnblogs.com/HeroBeast/archive/2008/03/18/10848 ...

  9. HttpSession讲解

    1:session进行身份验证的原理: 当客户端第一次访问服务器的时候,此时客户端的请求中不携带任何标识给服务器,所以此时服务器无法找到与之对应的 session,所以会新建session对象,当服务 ...

  10. iOS NSDictionary <--> NSString(JSON) in Objc

    NSDictionary --> NSString + (NSString*)stringINJSONFormatForObject:(id)obj { NSData *jsonData = [ ...