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. React开发实时聊天招聘工具 -第五章 需求分析

    Axios的使用 axios.get('/data') .then(res=>{ if(res.status==200) this.setState(data:res.data) })

  2. 紫书 例题 9-9 UVa 10003 (区间dp+递推顺序）

    区间dp,可以以一个区间为状态,f[i][j]是第i个切点到第j个切点的木棍的最小费用 那么对于当前这一个区间,枚举切点k, 可以得出f[i][j] = min{dp(i, k) + dp(k, j) ...

  3. PHP获取一周后的时间戳

    echo strtotime("now");//相当于将英文单词now直接等于现在的日期和时间,并把这个日期时间转化为unix时间戳.这个效果跟echo time();一样. ec ...

  4. 《linux 内核全然剖析》编译linux 0.12 内核 Ubuntu 64bits 环境

    我×.. . 最终好了,大概3 4个小时吧...各种毛刺问题.终究还是闯过来了.. .. ubuntu2@ubuntu:~/Downloads/linux-0.00-050613/linux-0.00 ...

  5. 改动UINavigationBar （导航栏）上NavigationBarItem 的字体大小和颜色的用法

    //创建一个左边button UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithTitle:@"<" ...

  6. Java源代码之集合框架（图）

    百度"java 集合"图时.搜出来一张图.图蛮不错的.跟大家分享下.

  7. LeetCode Implement strStr()（Sunday算法）

    LeetCode解题之Implement strStr() 原题 实现字符串子串匹配函数strStr(). 假设字符串A是字符串B的子串.则返回A在B中首次出现的地址.否则返回-1. 注意点: - 空 ...

  8. 【hdu 4289】Control

    [Link]:http://acm.hdu.edu.cn/showproblem.php?pid=4289 [Description] 给出一个又n个点,m条边组成的无向图.给出两个点s,t.对于图中 ...

  9. UDP 打洞示例 包含 服务器 客户端

    客户端示例: #include "Net.h" #include "../p2pInfo.h" int main() { CUdp  udp; if (0!=u ...

  10. 6.Windows 二进制文件 (.exe)安装--终端安装

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html 32 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/n ...