<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. python关于sorted里面key，reverse以及lamdba，operator这几个鸟人

     关于sorted:   help里给的解释 >>> help(sorted) Help on built-in function sorted in module __builti ...

  2. 今日SGU 5.23

    SGU 223 题意:给你n*n的矩形,放k个国王,每个国王不能放在别的国王的8连边上,问你有多少种方法 收获:状态DP,因为每行的放置只会影响下一行,然我们就枚举每行的状态和对应的下一行的状态,当两 ...

  3. JQ遍历 input 并修改name属性

    1.执行完克隆行后,会出现name属相相同的问题 function addRow(){ var obj = $("tr[name='info']:last"); var objCl ...

  4. 洛谷 P1324 矩形分割

    P1324 矩形分割 题目描述 出于某些方面的需求,我们要把一块N×M的木板切成一个个1×1的小方块. 对于一块木板,我们只能从某条横线或者某条竖线(要在方格线上),而且这木板是不均匀的,从不同的线切 ...

  5. Activity中recreate方法的应用

    參考两篇文章:http://blog.csdn.net/watermusicyes/article/details/47392949     http://blog.csdn.net/droyon/a ...

  6. #学习笔记#——JavaScript 数组部分编程（五）

    11.为数组 arr 中的每个元素求二次方.不要直接修改数组 arr,结果返回新的数组 function square(arr) { var resultArr=new Array(); for(va ...

  7. C#使用一般处理程序(ashx)中session

    .ashx中引用 session必须 using System.Web.SessionState ,继承IReadOnlySessionState/IRequiresSessionState IRea ...

  8. 分享一个css3学习使用的选择器手册

    http://www.haorooms.com/tools/css_selecter/

  9. [翻译]魅族的M1 Note是十分廉价（dirt-cheap）的iphone5C增强版

    Meizu's M1 Note is a dirt-cheap iPhone 5c on steroids 魅族的M1 Note是十分廉价(dirt-cheap)的ihone5C增强版 While m ...

  10. activity-启动动画的设定（下面弹出出现，弹入下面消失）

    1.今天为了把一个activity以dialog的形式显示,而且实现从开始的时候从底部往上弹出,结束的时候,从上往下消失,做了如下的工作. 1)如果把一个activity以dialog的形式显示? 这 ...