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. css3 scale的用法例子

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

  2. SQLServer2008端口及防火墙设置

    一,Microsoft SQL Server 2008R2数据库设置 1.       开始=>程序=>Microsoft SQL Server 2008R2=>配置工具=>S ...

  3. 入门Python:《趣学Python编程》中英文PDF+代码

    入门python推荐学习<趣学python编程>,语言轻松,通俗易懂,讲解由浅入深,力求将读者阅读和学习的难度降到最低.任何对计算机编程有兴趣的人或者首次接触编程的人,不论孩子还是成人,都 ...

  4. 怎样借助log4j把日志写入数据库中

            log4j是一个优秀的开源日志记录项目.我们不仅能够对输出的日志的格式自定义,还能够自定义日志输出的目的地,比方:屏幕.文本文件,数据 库,甚至能通过socket输出.本节使用MySQ ...

  5. POJ 2533 Longest Ordered Subsequence（dp LIS）

    Language: Default Longest Ordered Subsequence Time Limit: 2000MS   Memory Limit: 65536K Total Submis ...

  6. Android 学习笔记之Bitmap位图的旋转

    位图的旋转也可以借助Matrix或者Canvas来实现. 通过postRotate方法设置旋转角度,然后用createBitmap方法创建一个经过旋转处理的Bitmap对象,最后用drawBitmap ...

  7. 【Django】实现跨域请求

    目录 JsonP实现跨域 在Django中间件中添加响应头 @ *** CORS 即 Cross Origin Resource Sharing 跨域资源共享. 跨域请求分两种:简单请求.复杂请求. ...

  8. 玩转Bash脚本：选择结构之case

    总第5篇 之前,我们谈到了if. 这次我们来谈还有一种选择结构--case. case与if if用于选择的条件,不是非常多的情况,假设选择的条件太多.一系列的if.elif,.也是醉了. 没错,ca ...

  9. C. Arthur and Table（Codeforces Round #311 (Div. 2) 贪心）

    C. Arthur and Table time limit per test 1 second memory limit per test 256 megabytes input standard ...

  10. FragMent-通过Arguments方法 跟activity通信

    今天主要学习下通过Arguments,实现activity 给fragment传递数据.这个方法也是通过参数bundle来进行数据传输的 直接看如下代码 一,定义一个fragment,在oncreat ...