知识点

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. Redis-逻辑库-select

  2. 【水一篇】骚操作之net 6的winform启动的同时启动Net 6 WebApi【同一套代码】

    引言 有段时间没有写博客了,不知道写什么,加上最近一直在玩单片机方面的东西,所以有一些懈怠.首先呢,为什么会有这么一个问题,是在一个QQ群里,有看到有人提问,能不能在启动Winform的同时去启动一个 ...

  3. Oracle session的sid与serial的简单学习

    Oracle session的sid与serial的简单学习 ITPUB vage的说法 这样说吧,Oracle允许的会话数(或者说连接数)是固定的,比如是3000个.假设每个会话要占1K字节,哪一共 ...

  4. [转帖]Oracle参数解析(parallel_force_local)

    https://www.modb.pro/db/122032 是否需要增加这个参数? 往期专题请查看www.zhaibibei.cn这是一个坚持Oracle,Python,MySQL原创内容的公众号 ...

  5. [转帖]《Linux性能优化实战》笔记（二）—— CPU 上下文切换（上）

    上一篇的最后一个例子,在多个进程竞争CPU时,我们看到每个进程实际上%usr部分只有20%多,70%多是在wait,但是load远远高于单个进程使用CPU达到100%. 这让我想到之前看的RWP公开课 ...

  6. Python学习之十一_Windows获取硬件信息

    Python学习之十一_Windows获取硬件信息 简介 网上找了一些方法简单整理了下,可以快速获取部分信息 包含机器名称等. 以及序列号相关 部分学习来源: https://blog.51cto.c ...

  7. XJTU少年班+自动化钱学森班+电气工程辅修专业课笔记合集

    通过百度网盘分享的文件:笔记整理链接:https://pan.baidu.com/s/1BrHQ1EqvlQlbWqpD5h_6Sg?pwd=shsg 提取码:shsg复制这段内容打开「百度网盘APP ...

  8. echarts 设置legend样式

    设置legend样式 legend: { x: 'center', data: ['班车', '包车'], icon: "circle", // 这个字段控制形状 类型包括 cir ...

  9. 【小测试】golang中使用string()来转换[]byte数组产生了拷贝

    下方是benchmark的数据差异: import ( "reflect" "unsafe" ) // NoAllocString convert []byte ...

  10. NextJs 与 Tailwind 入门开发笔记

    前言 距离上次更新已经过去好久了,之前我在 StarBlog 博客2023年底更新一览的文章里说要使用 Next.js 来重构博客前端,最近也确实用 next.js 做了两个小项目,一个是单点认证项目 ...