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. Windows 一键关闭UAC、防火墙、IE配置脚本

    有时候,在环境需求下,需要关闭windows防火墙,UAC,以及IE选项配置. 对不懂电脑来说是比较麻烦的,老是得教他们,关键还记不住…… so,以下脚本就可以解决这个问题 注:脚本 需要右键 以管理 ...

  2. 玩转 Jupyter Notebook （CentOS）

    Jupyter Notebook 简介 Jupyter Notebook 是一个开源的 Web 应用程序,可以用来创建和共享包含动态代码.方程式.可视化及解释性文本的文档.其应用于包括:数据整理与转换 ...

  3. 【Henu ACM Round #13 A】 Hulk

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟. [代码] #include <bits/stdc++.h> using namespace std; int m ...

  4. Python学习笔记3：简单文件操作

    # -*- coding: cp936 -*- # 1 打开文件 # open(fileName, mode) # 參数:fileName文件名称 # mode打开方式 # w     以写方式打开. ...

  5. 【java】itoo项目实战之大数据查询之使用 new map 优化hibernate之级联查询

    在我的上一篇博客<[java]itoo项目实战之hibernate 懒载入优化性能>中,我曾提到过学生数据有2万条,查询数据十分的慢,这是让人非常受不了的事情.看着页面进度条一直转着圈圈, ...

  6. 34.Intellij IDEA 安装lombok及使用详解

    转自:https://blog.csdn.net/qinxuefly/article/details/79159018 项目中经常使用bean,entity等类,绝大部分数据类类中都需要get.set ...

  7. Zabbix自动发现与自动注册.

    一, 自动发现与自动注册 自动发现? 当场景中出现要添加很多台主机的时候,一台台添加难免太过于繁琐,zabbix提供自动注册,自动发现,可以实现主机的批量添加, zabbix的发现包括三种类型: # ...

  8. WinRAR 5.21 去弹窗 疑惑

    WinRAR 突然就有弹窗广告了 ,找了个方法,重新写一下安装目录下的 rarreg.key,确实有效果但是重写的和之前的完全一样啊,至少在文本中完全一样,怎么回事. 下面附上两个文件, 1.key ...

  9. Sparse Autoencoder（二）

    Gradient checking and advanced optimization In this section, we describe a method for numerically ch ...

  10. Kinect 开发 —— WaveHand

    基本注释都写了,就不废话了 <Window x:Class="KinectBasicHandTrackingFrameworkTest.MainWindow" xmlns=& ...