<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. Fishing Net

    In a highly modernized fishing village, inhabitants there make a living on fishery. Their major tool ...

  2. Linux常用Office办公软件

    1.WPS Office是由金山软件股份有限公司自主研发的一款办公软件套件,可以实现办公最常用的文字.表格.演示等多种功能.免费提供海量的在线存储空间及文档模板.支持阅读和输出PDF文件.全面兼容Mi ...

  3. DEDECMS教程：列表页缩略图随机调用

    如果用过DEDECMS的朋友应该都知道,有些模板列表页面需要用到缩略图,调用内容中的缩略图可以使用系统自带的脚本调用第一张图片.但是,并不是我们所有的内容里都有图片,有时候第一张图片也不一定是适合尺寸 ...

  4. javaScript学习之正则表达式初探

    正则表达式    正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式通常被用来检索.替换那些符 ...

  5. 51nod 最长公共子序列+输出路径

    当x = 0 或 y = 0时 f[x][y] = 0 当a[x] = b[y]时  f[x][y] = f[x-1][y-1]+1 当a[x] != b[y]时 f[x][y] = max(f[x] ...

  6. Java Web学习总结（21）——http协议响应状态码大全以及常用状态码

    http协议响应状态码大全以及常用状态码 当我们在浏览网页或是在查看服务器日志时,常会遇到3位数字的状态码,这3位数字是什么意思呢?其实,这3位数字是HTTP状态码,用来表示网页服务器HTTP响应状态 ...

  7. Spring Cloud学习笔记【三】服务消费者Feign

    Feign 是一个声明式的 Web Service 客户端,它的目的就是让 Web Service 调用更加简单.它整合了 Ribbon 和 Hystrix,从而让我们不再需要显式地使用这两个组件.F ...

  8. HOJ——T 2430 Counting the algorithms

    http://acm.hit.edu.cn/hoj/problem/view?id=2430 Source : mostleg Time limit : 1 sec Memory limit : 64 ...

  9. css+ js 实现圆环时钟

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  10. 网上看到的一些IT资源

    A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板. Bootswatch:免费的Bootstrap主题. Templated:收集了845个免费的C ...