<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. react 常用的ui库

    1. https://ant.design/docs/react/introduce-cn   ANT DESIGNui 2. http://www.material-ui.com/#/   Mate ...

  2. sublime 编辑器汉化

    一.下载Sublime编辑器 官网下载地址:http://www.sublimetext.com/3 二.下载汉化包 汉化包下载地址:http://files.cnblogs.com/akwwl/su ...

  3. 【TC SRM 718 DIV 2 A】RelativeHeights

    [Link]: [Description] 给你n个数字组成原数列; 然后,让你生成n个新的数列a 其中第i个数列ai为删掉原数列中第i个数字后剩余的数字组成的数列; 然后问你这n个数列组成的排序数组 ...

  4. github连接报"ssh: connect to host github.com port 22: Connection timed out"错误

    1. 异常 在连接github时,执行"ssh -T git@github.com" 命令时,出现 ssh: connect to host github.com port 22: ...

  5. 洛谷 P1914 小书童——密码

    P1914 小书童——密码 题目背景 某蒟蒻迷上了“小书童”,有一天登陆时忘记密码了(他没绑定邮箱or手机),于是便把问题抛给了神犇你. 题目描述 蒟蒻虽然忘记密码,但他还记得密码是由一串字母组成.且 ...

  6. java8新增特性（一）---Lambda表达式

    Lambda表达式也成为闭包,是java语言层次上的改变,Lambda同意把函数作为一个方法的參数(函数作为參数传递进方法中),或者把代码看成数据.函数式程序猿对这一概念非常熟悉. 在JVM平台上有非 ...

  7. 聊聊高并发（十八）理解AtomicXXX.lazySet方法

    看过java.util.concurrent.atomic包里面各个AtomicXXX类实现的同学应该见过lazySet方法.比方AtomicBoolean类的lazySet方法 public fin ...

  8. 搭建个人博客 方式2 使用jekyll

    孙广东  2016.3.12 环境安装:1.通过 RailsInstaller  来安装 Ruby https://www.ruby-lang.org/zh_cn/documentation/inst ...

  9. 内网使用 IPV6 之 Chrome 浏览器 扩展程序 篇

    手机端的 Google Chrome 浏览器在打开 "流量节省程序"后,它会通过 Google 的服务器中转流量,这台服务器支持 IPV4 和 IPV6.想在PC端使用类似的&qu ...

  10. js---12对象创建方式，构造器，原型

    <script type="text/javascript"> var o = {}; var o1 = new Object();//这2种方式创建对象是一样的,因为 ...