<div id="app">
<div class="item">
<span class="name">Key:</span>
<input type="text" name="" id="" v-model="search.key" class="ipt" />
</div>
<div class="form-group">
<div>
<label>Name:</label>
<input type="text" class="ipt" name="" id="" value="" v-model="newPerson.name" />
</div>
<div>
<label>Age:</label>
<input type="" class="ipt" name="" id="" value="" v-model="newPerson.age" />
</div>
<div>
<label>Sex:</label>
<input type="" class="ipt" name="" id="" value="" v-model="newPerson.sex" />
</div>
<button @click="Add" class="add">添加数据</button>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Delete</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list" v-if="item.name.indexOf(search.key)>=0||item.age.indexOf(search.key)>=0||item.sex.indexOf(search.key)>=0">
<td>{{item.name}}</td>
<td :style="item.age>20 ?'color: red' : ''">{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button @click="Delete(index)">Delete</button></td>
<td><button @click="Edit(index)">Edit</button></td>
</tr>
</tbody>
</table>
<div v-if="show">
<label>Name:</label>
<input type="text" name="" id="name" :value="editData.name" v-model="editData.name" />
<label>Age:</label>
<input type="" name="" id="" :value="editData.age" value="" v-model="editData.age" />
<label>Sex:</label>
<input type="" name="" id="" :value="editData.sex" value="" v-model="editData.sex" />
<button @click="Confirm(editData.index)">Confirm</button>
</div>
</div>

  

<style type="text/css">
*{
margin: 0;
padding: 0;
}
#app {
background: #2C3E50;
color: #fff;
padding: 20px;
} .form-group {
margin-bottom: 30px;
} table {
width: 100%;
padding: 8px;
text-align: center;
color: #000;
background: #E74C3C;
} table tr {
background: #F4F4F4;
height: 40px;
line-height: 40px; }
table tr td{
border-radius: 4px;
} table tr th {
background: #F1C40F;
color: #fff;
border-radius: 4px;;
} table tr button {
border: none;
background: #F1C40F;
border-radius: 4px;
padding: 4px;
color: #fff;
} .item,
.form-group {
background: #E74C3C;
padding: 10px;
} .form-group {
margin-top: 20px;
} .ipt {
width: 50%;
height: 18px;
line-height: 18px;
border: none;
border-radius: 4px;
margin-bottom: 10px;
padding: 4px;
} .name,
label {
display: inline-block;
width: 60px;
font-size: 18px;
height: 28px;
line-height: 28px;
margin-right: 5px;
text-align: right;
} .add {
display: block;
margin-top: 10px;
margin-bottom: 10px;
border: none;
outline: none;
border-radius: 4px;
height: 28px;
line-height: 28px;
background: #F1C40F;
color: #fff;
text-align: center;
width: 30%;
margin: 0 auto;
}
</style>

  

<script>
new Vue({
el: "#app",
data: {
search: {
key: ''
},
newPerson: {
name: '',
age: '',
sex: ''
},
list: [{
name: 'An',
age: '18',
sex: 'female'
}, {
name: 'Bo',
age: '18',
sex: 'male'
}, {
name: 'Cin',
age: '18',
sex: 'male'
}],
editData: {
name: '',
age: '',
sex: '',
index: '',
},
show: false
},
methods: {
Add: function() {
this.list.push({
name: this.newPerson.name,
age: this.newPerson.age,
sex: this.newPerson.sex
});
//重置数组
this.newPerson = {
name: '',
age: '',
sex: ''
};
},
Delete: function(i) {
this.list.splice(i, 1);
},
Edit: function(i) {
this.show = true;
this.editData.name = this.list[i].name;
this.editData.age = this.list[i].age;
this.editData.sex = this.list[i].sex;
this.editData.index = i;
},
Confirm: function(i) {
this.show = false;
this.list[i].name = this.editData.name;
this.list[i].age = this.editData.age;
this.list[i].sex = this.editData.sex;
}
}
})
</script>

  

Vue表格数据增删改查及搜索的更多相关文章

  1. jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  2. SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学、字符串、日期时间)函数[转]

    SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学.字符串.日期时间)函数   --创建表格 create table aa ( UserName varchar(50 ...

  3. 用AngularJS实现对表格的增删改查(仅限前端)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建

    VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的标签相对简单,如果需要深入了解VF相关知识以及标签, 可以通过以下链接查看或下载 ...

  5. js实现表格的增删改查

    这份代码实现了对表格的增加,删除,更改,查询. 点击一次添加按钮,表格会增加一行. 点击重置按钮,输入框的内容会被清空. 添加一行后,最后两格为更改和删除.点击更改,原有内容会各自显示在一个输入框内, ...

  6. 基于AT UI实现表格的增删改查遇到的坑

    基于AT UI实现表格的增删改查遇到的坑 坑一.表格数据加载的渲染报错 报错:Error in render: "TypeError: Cannot read property 'isChe ...

  7. 【转载】salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建

    salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建   VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的 ...

  8. 【原生】js实现表格的增删改查

    说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...

  9. C#操作Excel数据增删改查(转)

    C#操作Excel数据增删改查. 首先创建ExcelDB.xlsx文件,并添加两张工作表. 工作表1: UserInfo表,字段:UserId.UserName.Age.Address.CreateT ...

随机推荐

  1. Unity -- 入门教程二

    为了接下来要做的小游戏,在这里我要小小的修改一下移动的代码. public class PlayerMove : MonoBehaviour { //定义移动的速度 public float Move ...

  2. mysql数据库连接状态,不要做修改数据库表结构的操作;数据库迁移操作;

    在开发过程中,python的flask框架使用sqlalmysql连接mysql数据库. 在程序连接数据量过程中,不要修改数据表的结构.比如在连接状态中使用下面的软件修改数据表结构,这个软件立即就会卡 ...

  3. uva 11127(暴力)

    题意:给出一个字符串,包含0.1.*,当中×是能够替换成0或者1的,假设字符串的某个子串S有SSS这种连续反复3次出现,不是Triple-free串,问给出的字符串能够形成多少个非Triple-fre ...

  4. 一起talk C栗子吧(第八十四回:C语言实例--使用信号进行进程间通信一)

    各位看官们,大家好,上一回中咱们说的是进程间通信的样例.这一回咱们说的样例是:使用信号进行进程间通信.闲话休提,言归正转. 让我们一起talk C栗子吧! 我们在上一回中提到过进程之间通信须要解决的三 ...

  5. java与MFC中的一些常识

    一个.java文件中可以有很多类.不过注意以下几点:1.public 权限的类只能有一个(也可以一个都没有,但最多只有1个)2.这个.java文件的文件名必须是public类的类名(一般的情况下,这里 ...

  6. Use the command of tar to multi-part archive method.

    We usually meet the package too large to upload internat space when upload have a limited .So we nee ...

  7. Intel平台map

  8. vim 寄存器的使用

    1. 寄存器的格式 "[a~z] 2. 在复制时指定寄存器:"ayw 3. 剪切时使用寄存器:"add 3. 黏贴时指定从某个寄存器处获取数据:"ap 4. 几 ...

  9. 后端程序员看前端想死(二)进入页面之后js分析

    在上一篇中分析了一下以网页的组成.header中引入的乱七八糟的东西,现在进入到js中进行分析了 tuhooo啊,你是要搞前端了么? nonono,好玩,学一下 打开页面之后执行js的几种方法 直接写 ...

  10. JavaScript常用库

    提供个学习几种库的url,记录下. 1.JavaScript简介 JavaScript是Netscape公司开发的一种脚本语言(scripting language).JavaScript的出现使得网 ...