<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">

          </label>

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

          <label>搜索名称关键字:

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

            </label>

        </div>

    </div>    

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

      <thead>

          <tr>

              <th>Id</th>

              <th>Name</th>

              <th>Ctime</th>

              <th>Operation</th>

          </tr>

      </thead>

      <tbody>

          <!-- <tr v-for="item in list" :key="item.id"> -->

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

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

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

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

              <td>

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

              </td>

          </tr>

      </tbody>

    </table>

  </div>

    <script>

    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(){

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

            this.list.push(car)

            this.id = this.name = ''

          },

          // splice用法：    splice 粘接，胶接。  也就是去掉一部分，用其他东西替代拼接

          // arr.splice(2,0,"William");    第二个值 0，直接在index=2的地方插入新的值，没有删除旧的元素。

          // George,John,Thomas,James,Adrew,Martin

          // George,John,William,Thomas,James,Adrew,Martin

          del(id){

            // 数组的some(); 方法。   findIndex(); 方法类似，功能更单一，专门查找索引。

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

               if(item.id == id){

                 this.list.splice(i, 1);

                // some(); 在数组里找符合条件的，return true 会立即终止这个数组的后续循环。

                return true;

              };

            });

          },

          search(keywords){

            // 方法一：

            var newList = [];

            this.list.forEach(item => {

              // indexOf();  检索字符串里是否包含关键字，包含则范围index值，不包含返回 -1.

              // console.log('曾经我也想过一了百了'.indexOf(''));

              // indexOf('')  返回值是 0 （搜索框空白，不是空格。）

              // 只要不是 -1，值都会被push到数组里。   所以搜索栏还没输关键字的时候，显示了默认的数据。

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

                newList.push(item)

              };

            });

            return newList;

            // 方法二：

           // var newList = this.list.filter(item=>{

            return this.list.filter(item=>{   // filter();  遍历数组，返回符合条件的新数组。

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

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

                return item;

              };

            });

            // return newList; 先用中间变量var = newList接收，再return  这里改写成直接return

          },

        },

    });

    </script>

</body>

VUE笔记 - 品牌后台 - v-for Splice Some Filter findIndex indexOf 直接return函数结果的更多相关文章

  1. vue+express之前后台分离博客

    说来惭愧,这么久没有更新过博客了,写个项目练练手吧,打算写一个vue+express的博客  可能这个时间说长不长说短不短  写到哪就是哪吧  我采用的是前后台分离  express采用的是mvc,但 ...

  2. Vue + Element-ui实现后台管理系统(2)---项目搭建 + ⾸⻚布局实现

    项目搭建 + ⾸⻚布局实现 上篇对该项目做了个总述 :Vue + Element-ui实现后台管理系统(1) --- 总述 这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 : 整体效果 后台首页按布局一 ...

  3. Vue + Element-ui实现后台管理系统(3)---面包屑 + Tag标签切换功能

    面包屑 + Tag标签切换功能 有关后台管理系统之前写过两遍博客,看这篇之前最好先看下这两篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system 1.V ...

  4. 保姆级别的vue + ElementUI 搭建后台管理系统教程

    vue + ElementUI 搭建后台管理系统记录 本文档记录了该系统从零配置的完整过程 项目源码请访问:https://gitee.com/szxio/vue2Admin,如果感觉对你有帮助,请点 ...

  5. MySQL学习笔记-数据库后台线程

    数据库后台线程 默认情况下讲述的InnoDB存储引擎,以后不再重复声明.后台线程有7个--4个IO thread,1个master thread,1个锁监控线程,1个错误监控线程.IO thread的 ...

  6. vue 笔记

    <div id="root"> <div> <input v-model="inputValue" /> <butto ...

  7. Vue+ElementUI的后台管理框架

    新开发的一个后台管理系统.在框架上,领导要用AdminLTE这套模板.这个其实很简单,把该引入的样式和js文件引入就可以了.这里就不多赘述了.有兴趣的可以参考:https://www.jianshu. ...

  8. Vue笔记目录

    Vue笔记目录 一.Vue.js介绍 二.vue基础-vue-cli(vue脚手架) ...持续更新中,敬请期待

  9. 基于vue模块化开发后台系统——准备工作

    文章目录如下:项目效果预览地址项目开源代码基于vue模块化开发后台系统--准备工作基于vue模块化开发后台系统--构建项目基于vue模块化开发后台系统--权限控制 前言 本文章是以学习为主,练习一下v ...

随机推荐

  1. Java经典算法案例

    笔试中的编程题3 JAVA经典算法40例[程序1] 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第四个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? ...

  2. CSUOJ 1651 Weirdo

    1651: Weirdo Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 40  Solved: 21[Submit][Status][Web Board ...

  3. 洛谷 P1239 计数器

    P1239 计数器 题目描述 一本书的页数为N,页码从1开始编起,请你求出全部页码中,用了多少个0,1,2,…,9.其中—个页码不含多余的0,如N＝1234时第5页不是0005,只是5. 输入输出格式 ...

  4. 4.Maven之（四）Maven命令

    转自:https://blog.csdn.net/u012152619/article/details/51473410

  5. 上市公司恋上互联网金融 目前已有14家涌入P2P

    时至今日,互联网金融已蔚然成风,诸多上市公司正前赴后继介入到P2P业务中,据记者初步统计,目前至少有14家A股上市公司参与了P2P业务.央行6月份的报告显示,中国当前有600多家P2P公司,交易额达到 ...

  6. AtCoder Grand Contest 018 A - Getting Difference

    A - Getting Difference Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement ...

  7. 谈一谈Nginx的强大

    什么是Nginx? Nginx是一款高性能,开源的,支持高并发而轻量级的Web服务器,同时也是具有反向代理服务器及电子邮件(IMAP/POP3)的代理服务器. 基于REST架构风格,并且以统一资源描述 ...

  8. 漫话Unity（二）

    三.Unity编辑器介绍 Unity是一个商业级的3d游戏引擎.一个引擎的专业程度事实上并非体如今它多么牛b 的次世代效果,说实话那些效果即便你会用也不敢用.由于没有哪个手机是次世代的. 游戏引擎的专 ...

  9. 车牌识别--S5PV210測试第二次优化

    优化: 1.RGB转HSV 浮点运算改成定点运算: 2.匹配模板由图片改成C语言数组: 3.优化測试BMP车牌图片读取(两层for循环改为一层for循环). 总体相比优化之前时间降低110ms左右. ...

  10. 探索Oracle之数据库升级八 12c Downgrade 11gR2

    探索Oracle之数据库升级八 12c Downgrade 11gR2 前言: 我们前面已经完毕了11gR2 upgrade to 12c 的升级,整个过程还是比較顺利的,尽管和曾经版本号升级有些不太 ...