从今天开始，将不定期更新关于 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. Spark- 流量日志分析

    日志生成 package zx.Utils import java.io.{File, FileWriter} import java.util.Calendar import org.apache. ...

  2. Spring MVC的工作原理和机制

    Spring  MVC的工作原理和机制 参考: springMVC 的工作原理和机制 - 孤鸿子 - 博客园https://www.cnblogs.com/zbf1214/p/5265117.html ...

  3. css中单位px和em，rem的区别

    PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...

  4. 转载 解决Android与服务器交互大容量数据问题

    对于目前的状况来说,移动终端的网络状况没有PC网络状况那么理想.在一个Android应用中,如果需要接收来自服务器的大容量数据,那么就不得不考虑客户的流量问题.本文根据笔者的一个项目实战经验出发,解决 ...

  5. php实现多文件上传和下载。

    http://1229363.blog.163.com/blog/static/19743427200751291055264/

  6. ACM学习历程—HDU 5512 Pagodas（数学）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5512 学习菊苣的博客,只粘链接,不粘题目描述了. 题目大意就是给了初始的集合{a, b},然后取集合里 ...

  7. CodeForces-734E Anton and Tree 树的直径

    题目大意: 给定一棵有n个节点的树,有黑点白点两种节点. 每一次操作可以选择一个同种颜色的联通块将其染成同一种颜色 现在给定一个初始局面问最少多少步可以让树变为纯色. 题解: 首先我们拿到这棵树时先将 ...

  8. How to manage concurrency in Django models

    How to manage concurrency in Django models The days of desktop systems serving single users are long ...

  9. CF 360 E Levko and Game —— 贪心+最短路

    题目:http://codeforces.com/contest/360/problem/E 首先,每条边不是选 \( l[i] \) 就是选 \( r[i] \): 做法就是先把边权都设成 \( r ...

  10. C#中如何设置日期格式

    在C#中,ToShortDateString()是用于显示短日期格式的方法,如果使用下面的语句: Label1.Text = DateTime.Now.ToShortDateString(); 那么, ...