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. vue-router学习例子分享

    http://blog.csdn.net/bboyjoe/article/details/52804988 <!DOCTYPE html> <html lang="en&q ...

  2. VC++中的延时函数

    原文链接:http://www.educity.cn/develop/478947.html VC中提供了很多关于时间操作的函数,编写程序时我们可以跟据定时的不同精度要求选择不同的时间函数来完成定时和 ...

  3. 【Docker端口映射】

    Docker端口映射即将容器内开放的端口映射到宿主机端口,以实现外部网络的访问. 首先,我们先下载用于测试端口映射的镜像: [root@fedora ~]# docker pull training/ ...

  4. gcc---C/C++ 编译器

    gcc命令使用GNU推出的基于C/C++的编译器,是开放源代码领域应用最广泛的编译器,具有功能强大,编译代码支持性能优化等特点.现在很多程序员都应用GCC,怎样才能更好的应用GCC.目前,GCC可以用 ...

  5. 今日SGU 5.23

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

  6. CODEVS——T 4189 字典

    http://codevs.cn/problem/4189/  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 大师 Master 题解  查看运行结果     题目描述 Des ...

  7. PreferenceActivity、PreferenceFragment使用

    文件夹 文件夹 前言 PreferenceActivity preferences_scenario_1xml Preference Activity 演示 PreferenceFragment xm ...

  8. 第二天,导出文件sql，查询，视图view,聚合函数，反模式，字符串处理函数

    //把数据库导出到脚本文件mysqldump -uroot -p1234 --databases abc > d:/a/abc.sql CREATE TABLE stud( id INT PRI ...

  9. 操作excel脚本练习

    # -*- coding: utf-8 -*- import xlrd import xlwt import sys from xlwt import * from xlrd import open_ ...

  10. 76.Nodejs Express目录结构

    转自:https://blog.csdn.net/xiaoxiaoqiye/article/details/51160262 Express是一个基于Node.js平台的极简.灵活的web应用开发框架 ...