从今天开始，将不定期更新关于 Vue 的学习以及各种方法的使用，好了，下面就开始吧

Vue的实例创建首先需要我们引入一个vue.js(也可以在本地npm安装vue，我为了省事就...)，然后在HTML中定义一个 id 为 app 的 div ,这里定义的 id 是看你的个人喜好了，只要和后面我们在 script 标签内一直即可

下面是一个简单的小例子，实现 列表的添加、删除、关键字查询

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>首页</title>

    <script src="./lib/vue.js"></script>

    <link rel="stylesheet" href="./css/home.css">

    <link rel="stylesheet" href="./css/bootstrap.css">

</head>

<body>

    <div id="app">

        <!-- 实现添加 删除 功能 -->

        <div class="panel panel-default">

            <div class="panel-heading">

                <h3 class="panel-title">添加人物信息</h3>

            </div>

            <div class="panel-body form-inline">

                <label>

                    Id:

                    <input type="text" v-model="id" class="form-control">

                </label>

                <label>

                    Name:

                    <input type="text" v-model="name" class="form-control">

                </label>

                <label>

                    Age:

                    <input type="text" v-model="age" class="form-control">

                </label>

                <label>

                    Gender:

                    <input type="text" v-model="gender" class="form-control">

                </label>

                <label>

                    <input type="button" @click="add" value="添加" class="btn btn-primary">

                </label>

                <label>

                    关键字搜索：

                    <input type="text" v-model="keywords" placeholder="输入关键字搜索" class="form-control">

                </label>

            </div>

        </div>

        <table class="table table-bordered table-hover">

            <thead>

                <tr>

                    <th>ID</th>

                    <th>Name</th>

                    <th>Age</th>

                    <th>Gender</th>

                    <th>登记时间</th>

                    <th>编辑</th>

                </tr>

            </thead>

            <tbody>

                <tr v-for="item in search(keywords)" :key="item.id">

                    <td>{{ item.id }}</td>

                    <td>{{ item.name }}</td>

                    <td>{{ item.age }}</td>

                    <td>{{ item.gender }}</td>

                    <td>{{ item.ctime }}</td>

                    <td>

                        <a href="#" @click.prevent="del(item.id)">删除</a>

                    </td>

                </tr>

            </tbody>

        </table>

    </div>

    <script src="./js/home.js"></script>

</body>

</html>
var vm = new Vue({//js

  el: "#app",

  data: {

    id: "",

    name: "",

    age: "",

    gender: "",

    ctime: "",

    keywords: "",

    list: [

      { id: 1, name: "tom", age: 20, gender: "男", ctime: new Date() },

      { id: 2, name: "jam", age: 30, gender: "男", ctime: new Date() },

      { id: 3, name: "mark", age: 18, gender: "女", ctime: new Date() },

    ]

  },

  methods: {

    add() {//添加列表信息

      var addList = { id: this.id, name: this.name, age: this.age, gender: this.gender, ctime: this.ctime };

      this.list.push(addList);

      this.id = this.name = this.age = this.gender = this.ctime = "";

    },

    del(id) {//删除列表信息

      //第一种方法

      // some 方法返回 boolean 值，不是筛选一个新的数组，而是筛选有没有符合条件的值，只要有一个值符合条件则立即返回 true，不再执行后续操作（循环），否则返回 false

      // this.list.some((item, i) => {

      //   if (item.id == id) {

      //     this.list.splice(i, 1);

      //     return true;

      //   }

      // });

      //第二种方法

      var index = this.list.findIndex(item => {

        if (item.id == id) {

          return true

        }

      })

      this.list.splice(index, 1)

    },

    search(keywords) {//通过关键字搜索

      //第一种方法

      // var newList=[];

      // this.list.forEach(item =>{

      //   if(item.name.indexOf(keywords) != -1){

      //     newList.push(item)

      //   }

      // });

      // return newList;

      //第二种方法

      //filter方法是数组的过滤方法，返回一个新的数组，不会对原数组修改，return true 为想要的值，return false 则为去掉的值

      return this.list.filter(item => {

        if (item.name.includes(keywords)) {

          return item

        }

      })

    }

  }

})

Vue实现添加、删除、关键字查询的更多相关文章

  1. centos7 lvm合并分区脚本初探-linux性能测试 -centos7修改网卡名字-jdk环境安装脚本-关键字查询文件-批量添加用户

    1.#!/bin/bash lvmdiskscan | grep centos > /root/a.txt a=`sed -n '1p' /root/a.txt` b=`sed -n '2p' ...

  2. Sql批量添加，批量查询，批量删除，批量修改。mybatis都有对应标签

    Sql批量添加,批量查询,批量删除,批量修改.mybatis都有对应标签

  3. vue实现购物清单列表添加删除

    vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...

  4. vue简单案例_动态添加删除用户数据

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

  5. ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.   ...

  6. 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

  7. SQL语句添加删除修改字段及一些表与字段的基本操作

    用SQL语句添加删除修改字段 1.增加字段     alter table docdsp    add dspcode char(200)2.删除字段     ALTER TABLE table_NA ...

  8. WebService的简单运用添加删除

    WebService是一种跨编程语言和跨操作系统平台的远程调用技术,简单来说就是将数据存储到项目的文件夹下 .NET中基于DOM核心类 XmlDocument 表示一个XML文档 XmlNode表示X ...

  9. T-SQL动态查询（2）——关键字查询

    接上文:T-SQL动态查询(1)--简介 前言: 在开发功能的过程中,我们常常会遇到类似以下情景:应用程序有一个查询功能,允许用户在很多查询条件中选择所需条件.这个也是本系列的关注点. 但是有时候你也 ...

随机推荐

  1. EntityFramework 学习 一 三种开发模式

    Entity Framework支持3种不同的开发方法 1.Code First 2.Model First 3.Database First Code First 使用Code First开发模式, ...

  2. castle windsor学习-----Registering components one-by-one 注册类型

    1.在容器中注册一个类型 container.Register( Component.For<IMyService>() .ImplementedBy<MyServiceImpl&g ...

  3. Linux离线同步时间

    Linux离线同步时间 思路:以其中一台时间为准 脚本 #!/bin/shcurrent=`date '+%H:%M:%S'` for i in bigdata1 bigdata2 bigdata3 ...

  4. JavaWeb -- Session实例 -- 自动登录 和 防止表单重复提交(令牌产生器) MD5码

    1. 自动登录 http://blog.csdn.net/xj626852095/article/details/16825659 2. 防止表单重复提交 表单Servlet //负责产生表单 pub ...

  5. 关于jvm中的常量池和String.intern()理解

    1. 首先String不属于8种基本数据类型,String是一个对象. 因为对象的默认值是null,所以String的默认值也是null:但它又是一种特殊的对象,有其它对象没有的一些特性. 2. ne ...

  6. Python- 贪婪与非贪婪

    python运行匹配时,如果没有人为限定,默认是贪婪模式. import re a = 'python 22222java34bigdata' r = re.findall('[a-z]{3}',a) ...

  7. TYOI Day1 travel：Tree dp【处理重复走边】

    题意: 给你一棵树,n个节点,每条边有长度. 然后有q组询问(u,k),每次问你:从节点u出发,走到某个节点的距离mod k的最大值. 题解: 对于无根树上的dp,一般都是先转成以1为根的有根树,然后 ...

  8. Codeforces 486D Valid Sets：Tree dp【n遍O(n)的dp】

    题目链接:http://codeforces.com/problemset/problem/486/D 题意: 给你一棵树,n个节点,每个节点的点权为a[i]. 问你有多少个连通子图,使得子图中的ma ...

  9. JS常用工具类代码

    http://www.cnblogs.com/liszt/archive/2011/08/16/2140007.html js/javascript删除字符串中的html标签 function rem ...

  10. 一致性问题和Raft一致性算法——一致性问题是无法彻底解决的，可以说一个分布式系统可靠性达到99.99…%,但不能说它达到了100%

    一致性问题 一致性算法是用来解决一致性问题的,那么什么是一致性问题呢? 在分布式系统中,一致性问题(consensus problem)是指对于一组服务器,给定一组操作,我们需要一个协议使得最后它们的 ...