<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. vue中剖析中的一些方法

    1 判断属性 71 -81 var hasOwnProperty = Object.prototype.hasOwnProperty; /** * Check whether the object h ...

  2. excel导入数据的

    .aspx 文件 <form id="form1" runat="server"> <div> <asp:FileUpload I ...

  3. Java：JDBC操作

    内容:供程序员调用的接口与类,集成在java.sql和javax.sql包中,如:DriverManager类Connection接口Statement接口ResultSet接口 1.Class.fo ...

  4. 关于Echarts表格插件的使用

    <template> <div :style="{height:height,width:width}"></div> </templat ...

  5. 快速安装Nginx及配置详解（未完待续）

    导读: Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器,从2007年被德国人开发出来后可以说在市场的占有率一路飙升,因为它支持高并 ...

  6. 洛谷 P1716 双调序列

    P1716 双调序列 题目描述 电脑组的童鞋们经常玩一些智力PK小游戏,某月某日,发源于小朋友又发明了一种新的序列:双调序列,所谓的双调呢主要是满足如下条件描述: 假定有n(n<=1000)个整 ...

  7. windows下搭建hadoop-2.6.0本地idea开发环境

    概述 本文记录windows下hadoop本地开发环境的搭建: OS:windows hadoop执行模式:独立模式 安装包结构: Hadoop-2.6.0-Windows.zip - cygwinI ...

  8. js---04 属性 this

    var oUl = document.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); window.o ...

  9. vim-进入插入模式快捷键

    vim中有一些命令,是同时包含有大小写两种的.现在就集中测试下他们的区别:     1.A 跟a A-光标所在行的末尾插入 a-光标后插入 2.I 跟i I-光标所在行的非空字符前插入 i-光标前位置 ...

  10. umask---默认权限掩码