知识点

1.双向数据绑定

2.自定义指令

3.自定义过滤器

4.v-for循环对象数组

5.ES6操作数组的新方法：forEach some filter findIndex

实现效果

页面源码

<!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>Document</title>

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

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

  </head>

  <body>

    <div id="app">

      <div class="panel panel-primary">

        <div class="panel-heading">

          <h3 class="panel-title">添加品牌</h3>

        </div>

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

          <label>

            Id:

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

          </label>

          <label>

            Name:

            <input

              type="text"

              class="form-control"

              v-model="name"

              @keyup.enter="add"

            />

          </label>

          <input

            type="button"

            value="添加"

            class="btn btn-primary"

            @click="add"

          />

          <label>

            搜索名称关键字：

            <input type="text" class="form-control" v-model="keywords" v-focus/>

          </label>

        </div>

      </div>

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

        <thead>

          <tr>

            <th>Id</th>

            <th>Name</th>

            <th>Ctime</th>

            <th>Operation</th>

          </tr>

        </thead>

        <tbody>

          <!-- v-for中的数据默认是从data上的list直接渲染来的 -->

          <!-- 现在改为动态的方法查询 -->

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

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

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

            <td>{{ item.ctime | dateFormate('') }}</td>

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

          </tr>

        </tbody>

      </table>

    </div>

    <script>

      // 全局自定义指令

      Vue.directive('focus', {

        inserted: function(el){

          el.focus()

        }

      })

      // 全局时间过滤器

      Vue.filter('dateFormate', function(dateStr, pattern) {

        var dt = new Date(dateStr)

        var y = dt.getFullYear()

        var m = (dt.getMonth() + 1).toString().padStart(2, '0')

        var d = dt

          .getDate()

          .toString()

          .padStart(2, '0')

        // return `${y}-${m}-${d}`

        if (pattern.toLowerCase() === 'yyyy-mm-dd') {

          return `${y}-${m}-${d}`

        } else {

          var hh = dt

            .getHours()

            .toString()

            .padStart(2, '0')

          var mm = dt

            .getMinutes()

            .toString()

            .padStart(2, '0')

          var ss = dt

            .getSeconds()

            .toString()

            .padStart(2, '0')

          return `${y}-${m}-${d} ${hh}:${mm}:${ss}`

        }

      })

      var vm = new Vue({

        el: '#app',

        data: {

          id: '',

          name: '',

          keywords: '',

          list: [

            { id: 1, name: '奔驰', ctime: new Date() },

            { id: 2, name: '宝马', ctime: new Date() }

          ]

        },

        methods: {

          // 添加

          add() {

            if (this.id != '' && this.name != '') {

              var car = { id: this.id, name: this.name, ctime: new Date() }

              this.list.push(car)

              this.id = ''

              this.name = ''

            }

          },

          // 删除

          del(id) {

            // 方法一

            /* 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) {

            /*

            方法1

            var newList = [];

            this.list.forEach(item => {

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

                newList.push(item)

              }

            });

            return newList;

            */

            // forEach some filter findIndex

            return this.list.filter(item => {

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

                return item

              }

            })

          }

        }

      })

    </script>

  </body>

</html>

Vue实现静态列表增删查功能的更多相关文章

  1. Vue.js-简单的增删查功能

    1.Vue.js是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图 ...

  2. Vue系列之 => 结合ajax完成列表增删查

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

  3. [课本]JDBC课程6--使用JDBC的DAO模块化--完成数据库的增删查改_工具类JDBCTools四个(Preparedstatement)功能模块的敲定版

    (课本P273-任务九) /**DAO: Data Access Object * 为什么用: 实现功能的模块化,更有利于代码的维护和升级 * 是什么: 访问数据信息的类,包含对数据的CRUD(cre ...

  4. EAS开发之对已有单据的增删查改功能开发

      一:对于一个已经在其他业务部门定义好的业务单元,在另一个部门新增该业务单元的增删查改操作,应该怎么做?     由于业务单元已经定义过了,所以我们不能再进行建模.定义单据ui.而是要开发出一个单据 ...

  5. Node.js 的学习（四）分别连接MongoDB与MySQL数据库，实现增删查改功能

    一.Node.js 访问MongoDB 数据库 MongoDB 对许多平台都提供驱动可以访问数据库,如C#.Java.Node.js等. 1.1.安装MongoDB访问驱动 命令如下: 全局安装驱动: ...

  6. vue 中后台 列表的增删改查同一解决方案

    查看 & 查询 常⻅业务列表⻚都是由 搜索栏 和 数据列表 组成. 其中: 搜索栏包含 搜索条件 . 新增 . 批量xx . 导出 等对 数据列表 全局操作功能项. 数据列表包含 分⻚ 和每条 ...

  7. 学习记录——使用PHP实现数据增删查改等基本功能（前后端分离）

    萌新初次学习服务器端语言,分享学习经验 实现功能:1.显示数据表    2.对数据进行分页    3.对数据进行增删查改 由于本萌新采用前后端完全分离方案,所以数据传输用的ajax,为了提高代码的复用 ...

  8. day02 Python列表的增删查改及常用操作

    列表是python中的基础数据类型之一,其他语言中也有类似于列表的数据类型,比如js中叫数组,他是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如: li = [‘alex’,12 ...

  9. 基于.net的分布式系统限流组件 C# DataGridView绑定List对象时，利用BindingList来实现增删查改 .net中ThreadPool与Task的认识总结 C# 排序技术研究与对比 基于.net的通用内存缓存模型组件 Scala学习笔记：重要语法特性

    基于.net的分布式系统限流组件   在互联网应用中,流量洪峰是常有的事情.在应对流量洪峰时,通用的处理模式一般有排队.限流,这样可以非常直接有效的保护系统,防止系统被打爆.另外,通过限流技术手段,可 ...

  10. backbonejs mvc框架的增删查改实例

    一:开发环境 coffeescript和nodejs需要先安装,没装网上自己查安装步骤. 代码编写环境及esp框架下载: esp框架下载地址:https://github.com/nonocast/e ...

随机推荐

  1. .NET周刊【1月第2期 2024-01-21】

    国内文章 NCC Mocha v0.1.0 发布,.NET 开发的基于 OpenTelemetry 的 APM 系统 https://mp.weixin.qq.com/s/gUx-dqlYqcwgQN ...

  2. Java开发者的Python快速进修指南：探索15种独特的Python特殊方法

    概述 在Python中,特殊方法(也称为魔术方法)是由Python解释器自动调用的,我们不需要手动调用它们,而是使用内置函数来间接地使用它们.举个例子,我们可以实现特殊方法__len__(),然后通过 ...

  3. Nginx reload重新加载配置文件的异常情况

    Nginx reload重新加载配置文件的异常情况 背景 临近年底, 很多业务工作量都上来了. 今天同事告知, nginx的log 里面出现了大量的 too many openfiles 的提示信息. ...

  4. [转帖]pod容器开启pid限制

    https://zhdya.gitee.io/zhdya/archives/   cgroup中对pid进行了隔离,通过更改docker/kubelet配置,可以限制pid总数,从而达到限制线程总数的 ...

  5. [转帖]zookeeper三节点集群搭建

    https://www.jianshu.com/p/1dcfbf45383b 下载zookeeper Apache源 http://archive.apache.org/dist/zookeeper/ ...

  6. [转帖]使用 TiUP cluster 在单机上安装TiDB

    https://zhuanlan.zhihu.com/p/369414808   TiUP 是 TiDB 4.0 版本引入的集群运维工具,TiUP cluster 是 TiUP 提供的使用 Golan ...

  7. [转帖]三篇文章了解 TiDB 技术内幕 - 说存储

    https://cn.pingcap.com/blog/tidb-internal-1 引言 数据库.操作系统和编译器并称为三大系统,可以说是整个计算机软件的基石.其中数据库更靠近应用层,是很多业务的 ...

  8. [转帖]MioIO读/写性能测试

    https://www.jianshu.com/p/a0a84f91b16f   image.png COSBench是Intel团队基于java开发,是一个测试云对象存储系统的分布式基准测试工具,全 ...

  9. Jmeter学习之三_知识梳理

    Jmeter学习之三_知识梳理 背景 简单学习了Jmeter的两个用例 感觉可以继续深入学习一下Jmeter了. 所以想着趁体检入职之前继续学习完善一下. 希望能够继续提高 Jmeter的相关知识 1 ...

  10. [转帖]Linux常用的一些命令，看你知道多少？

    https://zhuanlan.zhihu.com/p/115279009 Linux中命令有很多,而Linux系统中使用命令也是它的一大特点.在Linux系统中使用命令处理问题灵活,高效,所以熟知 ...