知识点

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. [转帖]JVM随笔 --- 安全点（safe point）与 安全区域（ safe region）

    https://zhuanlan.zhihu.com/p/461298916 11 人赞同了该文章 最近回顾 JVM safe point 与 safe region 又有一些新的感悟与收获,特别写篇 ...

  2. [转帖]Kubernetes 1.23：IPv4/IPv6 双协议栈网络达到 GA

    https://kubernetes.io/zh-cn/blog/2021/12/08/dual-stack-networking-ga/#:~:text=Kubernetes%201.23%EF%B ...

  3. 【转帖】一道面试题：JVM老年代空间担保机制

    面试问题 昨天面试的时候,面试官问的问题: 什么是老年代空间担保机制?担保的过程是什么? 老年代空间担保机制是谁给谁担保? 为什么要有老年代空间担保机制?或者说空间担保机制的目的是什么? 如果没有老年 ...

  4. Linux的free命令与OOM的简单总结

    简介 查看操作系统配置最关键的几个命令是 lscpu 查看CPU信息 以及free 查看内存信息. 不过free信息有一个疑惑点 他的 free的值可能很小. 会让搭建产生误解. 这里简单说明一下. ...

  5. 一条sql了解MYSQL的架构设计

    1 前言 对于一个服务端开发来说 MYSQL 可能是他使用最熟悉的数据库工具,然而,大部分的Java工程师对MySQL的了解和掌握程度,大致就停留在这么一个阶段:它可以建库.建表.建索引,然后就是对里 ...

  6. vim 从嫌弃到依赖(23)——最后的闲扯

    截止到上一篇文章,关于vim的基础操作都已经讨论完了,这篇我主要就是闲扯,瞎聊.就想毕业论文都有一个致谢一样,这篇我们就作为整个系列的致谢吧 学习vim到底能给我们带来什么 学习vim到底能给我们带来 ...

  7. Windows7 SP1 安装.NET Framework4失败

    系统版本是Windows7旗舰版,已经安装了SP1补丁,但还是无法安装.NET Framework4或者4.5,提示安装失败. 这时可以安装.NET Framework4.8的开发包,我这里安装开发包 ...

  8. 深入剖析Java中的反射，由浅入深，层层剥离！

    写在开头 之前更新了不少Java的基础知识,比如Java的类.对象.基础类型.关键字.序列化.泛型.值传递等等,今天要上点深度了,来聊一聊Java中的 反射 ! 所谓反射,就是在运行时分析.检查和操作 ...

  9. CF1921F Sum of Progression 题解

    题目链接:CF 或者 洛谷 一道经典的类型题,把这种类型的题拿出来单独说一下. 注意到问题中涉及到需要维护 \(a_{x+k\times step}\) 这样的信息,这样的信息很难用树型结构维护,比较 ...

  10. 5个.NET开源且强大的快速开发框架（帮助你提高生产效率）

    中台Admin(Admin.Core) 中台Admin(Admin.Core)是前后端分离权限管理系统,前端 UI 基于Vue3开发,后端 Api 基于.NET 8.0开发.支持多租户.接口权限.数据 ...