methods:{

      add(){

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

        this.list.push(car);

      },

      del(id){

        this.list.splice(id,1);  // 数组里删除， 用splice  remove是操作dom的

      },

      search(keywords){   // 做搜索要明确是从哪个里面去搜。

        var newList = [];

        // if(this.list.name.indexOf(keywords) != -1){

          // list里面有多个对象，  应该是某个对象的name符合关键字，  即 item.name.indexOf

        //   this.list.push();   //  应该是push到新数组里面去。  newList.push(item);

        // };

        this.list.forEach(item => {  // 遍历 list 里的每个对象   // 再看一下箭头函数的课

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

          newList.push(item);

          };

        });

        return newList;

      },

    }
<body>

  <div id="app">

<!--

  本例要记的

  bootstrap类 form-inline  水平排列表单。

  bootstrap类 form-control

  findIndex();

  splice();

  push();

  some();

  padStart ??   补 0

  filter();

  forEach();

  VNode  是什么？？

  methods 里面 del(id); 部分要再看一下。

  自定义指令 v-focus

 -->

  <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" @keyup.enter="add();">

        </label>

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

        <label>

            搜索名称关键字:<input type="text" class="form-control" v-focus v-model="keywords">

        </label>

      </div>

    </div>

    <table class="table table-hover table-bordered 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">

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

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

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

          <td><a href="javascript:;" @click="del();">删除</a></td>

        </tr>

      </tbody>

    </table>

  </div>

  <script>

  Vue.filter('dateFormat', function(dateStr, pattern=''){

    var dt = new Date(dateStr);

    var y = dt.getFullYear();

    var m = dt.getMonth() +1;

    var d = dt.getDate();

    return `${y}-${m}-${d}`;

  });

  Vue.directive('focus', {

      inserted: function (el) {

        el.focus();

      },

    });

  var vm = new Vue({

    el:'#app',

    data:{

      id: '',

      name: '',

      keywords: '',

      list:[

        {id:1, name:'宝马', ctime:new Date()}, // 这里要现在外面定义 id  name ctime

        {id:2, name:'奔驰', ctime:new Date()}

      ]

    },

    methods:{

      add(){

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

        this.list.push(car);

        // 直接push到list就可以，不用管怎么加到表格里。v-for会自动渲染。

        this.id = this.name = '';

      },

      del(id) { 

          // 1. 如何根据Id，找到要删除这一项的索引

          // 2. 如果找到索引了，直接调用 数组的 splice 方法

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

            if (item.id == id) {

              this.list.splice(i, 1)

              // 在 数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环

              return true;

            }

          }) */

        var index = this.list.findIndex(item => {

          if (item.id == id) {

            return true;

          }

        });

        // console.log(index)

        this.list.splice(index, 1);

      },

      search(keywords) {

        // search是在 列表里， 所以要联想到调用list[] 数组筛选的方法。

          /* var newList = []

          this.list.forEach(item => {

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

              newList.push(item)

            }

          })

          return newList */

          // 直接return  后面整个函数的返回值。 记住这个新用法。

          // 省去了开头的var newList 和 末尾的 return newList。 直接不需要中间变量。

          return this.list.filter(item => {

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

              return item;

            };

          });

          // return newList

        }

      }

    });

  </script>

</body>

VUE错误记录 - 品牌后台练习 search(); 数组 splice forEach push 箭头函数的更多相关文章

  1. vue 错误记录

    1.错误信息: You may use special comments to disable some warnings.Use // eslint-disable-next-line to ign ...

  2. Vue 错误记录：Cannot read property 'beforeRouteEnter' of undefined

    点击某路由链接,页面提示: Cannot read property 'beforeRouteEnter' of undefined 查看代码并无手写beforeRouterEnter设置, 把页面内 ...

  3. VUE错误记录 - 小球模拟购物车

    <body> <div id="app"> <input type="button" value="Add to Car ...

  4. vue错误记录

    启动时报错如下 D:\QQFile\\FileRecv\industry_vue>cnpm run dev > vue_demo@ dev D:\QQFile\\FileRecv\indu ...

  5. 21.VUE学习之-操作data里的数组变异方法push&unshit&pop&shift的实例应用讲解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue中如何实现后台管理系统的权限控制

    vuejs单页应用的权限管理实践 一.前言 在广告机项目中,角色的权限管理是卡了挺久的一个难点.首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细: 接口访问的权限控制 页面的权限控制 菜单 ...

  7. 1.使用Vue.js实现品牌案例添加功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue_shop(基于vue电商管理后台网站)

    vue_shop 目录 vue_shop day01 实现登录功能 项目预开发处理 Login.vue完整代码: 处理步骤: 添加element-ui的表单组件 添加第三方字体: 添加表单验证 导入a ...

  9. Vue 问题记录

    Vue 问题记录 汇总日常开发中遇到的关于vue的问题 VeeValidator 语言设置 校验消息默认是英文的,定义中文或其他语言的错误提示消息 import VeeValidate from 'v ...

随机推荐

  1. HDU 4513 吉哥系列故事――完美队形II

    http://acm.hdu.edu.cn/showproblem.php?pid=4513 吉哥系列故事——完美队形II Time Limit: 3000/1000 MS (Java/Others) ...

  2. [Chromium文档转载，第002章]Mojo C++ Bindings API

    Mojo C++ Bindings API This document is a subset of the Mojo documentation. Contents Overview Getting ...

  3. CentOS中实现与Ubuntu下apt-get install build-essential功能类似的命令

    CentOS中实现与Ubuntu下apt-get install build-essential功能类似的命令 在Ubuntu中安装完系统后,可以直接使用apt-get install build-e ...

  4. BZOJ2337: [HNOI2011]XOR和路径(高斯消元，期望)

    解题思路: Xor的期望???怕你不是在逗我. 按为期望,新技能get 剩下的就是游走了. 代码: #include<cmath> #include<cstdio> #incl ...

  5. idea中实现类快速重写service方法 快捷键

    1.在实现类中 CTRL+O 快捷键,会弹出所有方法 2.选择service中的方法,会自动重写

  6. Volley简单学习使用五—— 源代码分析三

    一.Volley工作流程图: 二.Network     在NetworkDispatcher中须要处理的网络请求.由以下进行处理: NetworkResponse networkResponse = ...

  7. 配置Xcode版本控制SVN详细步骤内含解决Xcode/Mac OS10.8无法配置SVN的解决方法

    本站文章均为李华明Himi原创,转载务必在明显处注明:(作者新浪微博:@李华明Himi ) 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/game-de ...

  8. vue -- config.js 配置跨域文件

    1.在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的. 2.当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev -- ...

  9. Redhat Linux下如何使用KVM虚拟机（视频）

    KVM(kernel-basedVirtualMachine)是一个开源的系统虚拟化模块,自Linux2.6.20之后集成在Linux的各个主要发行版本中.它使用Linux自身的调度器进行管理,所以相 ...

  10. VisualRoute for Mac OS 体验

    VisualRoute 网络路径结点回溯分析工具,以在世界地图上显示连结的路径的方式,让你知道当无法连上某些IP时的真正问题所在.VisualRoute将traceroute.ping以及Whois等 ...