品牌案例的增删查和其他部分效果：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

    <script src="./lib/vue.js"></script>

    <link rel="stylesheet" href="./lib/bootstrap.min.css" />

    <!-- 需要用到Jquery吗？？？其实不需要的jq主要是用Js进行查询、操作DOM元素的，而VUE是用于免除操作DOM的过程，所以不需要加载的 -->

  </head>

  <body>

    <div id="app">

      <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.f2="add"

            />

          </label>

          <!-- 在VUE使用事件绑定机制，为元素指定处理函数时，如 果加（）就可以传参数了 -->

          <input

            type="button"

            value="添加"

            class="btn btn-primrary"

            @click="add"

          />

          <label>

            搜索名称关键字：

            <input

              type="text"

              class="form-control"

              v-model="keywords"

              id="search"

              v-focus

              v-color="'red'"

            />

          </label>

        </div>

      </div>

      <table class="table table-bordered table-hover table-striped">

        <thead>

          <tr>

            <th>Id</th>

            <th>Name</th>

            <th>Ctime</th>

            <th>Opertion</th>

          </tr>

        </thead>

        <tbody>

          <tr v-for="item in search(keywords)" :key="item.id">

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

            <td v-text="item.name"></td>

            <td>{{ item.ctime  | dateFormat(' ')}}</td>

            <td>

              <a href="" @click.prevent="del(item.id)">删除</a>

            </td>

          </tr>

        </tbody>

      </table>

    </div>

    <script>

      //全局的过滤器，进行时间的格式化

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

        //根据给定的时间字符串，得到特定的时间

        var dt = new Date(dateStr);

        var y = dt.getFullYear();

        //后面加的padStart是ES6新用法，自动补全的，长度为2，用0补充！目的是让个位数改成0两位数！

        var m = (dt.getMonth() + 1).toString().padStart(2, "0");

        var d = dt

          .getDate()

          .toString()

          .padStart(2, "0");

        if (pattern.toLowerCase() === "yyyy-mm-dd") {

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

        } else {

          var hh = dt

            .getHours()

            .toString()

            .padStart(2, "0");

          var mm = dt

            .getMinutes()

            .toString()

            .padStart(2, "0");

          var ss = dt

            .getSeconds()

            .toString()

            .padStart(2, "0");

          return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

        }

      });

      //自定义全局按键修饰符：新系统自动生成的按键也就几种，这个数字是其按键对应的键值！为避免难以记忆先声明定义下！

      Vue.config.keyCodes.f2 = 113;

      //获取焦点的--使页面刷新就在搜索框内能点取

      Vue.directive("focus", {

        bind: function(el) {},

        inserted: function(el) {

          el.focus();

        },

        update: function(el) {}

      });

      //获取焦点的字体颜色变成指定的颜色！

      Vue.directive("color", {

        bind: function(el, binding) {

          el.style.color = binding.value;

        }

      });

      //创建Vue实例

      var vm = new Vue({

        el: "#app",

        data: {

          id: "",

          name: "",

          keywords: "",

          list: [

            { id: 1, name: "奔驰", ctime: new Date() },

            { id: 2, name: "宝马", ctime: new Date() }

          ]

        },

        methods: {

          add() {

            // 从data上获取id name，组织个对象，用数组的方法进行添加

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

            this.list.push(car);

            this.id = this.name = "";

          },

          del(id) {

            //根据id删除数据--找到索引，调用数组的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;

            //     }

            // })

            // this.list.splice(index,1)

          },

          search(keywords) {

            //根据关键字，进行数据的搜索

            //     var newList=[]

            //    this. list.forEach(item=>{

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

            //             newList.push(item)

            //         }

            //     })

            //     return newList

            // forEach some filter findIndex这些都是数组的新方法，都会对数组中的每一项，进行遍历，执行相关的操作

            return this.list.filter(item => {

              //在ES6中，为字符串提供一种新方法，叫String.prototype.includes('要包含的字符串') 相当于contain

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

                return item;

              }

            });

          }

        }

      });

    </script>

  </body>

</html>　　　　　　

Vue学习之品牌案例部分代码小结（二）的更多相关文章

  1. Vue学习之基础及部分指令小结（一）

    一.理解MVC和MVVM的关系: MVC:Model View Controller (模型 视图 控制器) 分别为:业务逻辑.界面.用来调度View和Model层 MVVM:Model View V ...

  2. Vue学习之全局和私有组件小结（七）

    一.组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用相应的组件即可. 二.组件和模块: 1.模块化:是从代码逻 ...

  3. Vue学习之过滤器和自定义指令小结（三）

    过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...

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

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

  5. Vue学习之路之登录注册实例代码

    Vue学习之路之登录注册实例代码:https://www.jb51.net/article/118003.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/wa ...

  6. vue学习笔记2

    Vue.js - Day2 品牌管理案例 添加新品牌 删除品牌 根据条件筛选品牌 1.x 版本中的filterBy指令,在2.x中已经被废除: filterBy - 指令 <tr v-for=& ...

  7. vue学习（2）

    node.js介绍与npm操作 1.node就是JavaScript的一个运行环境(平台),他不是一门语言,也不是JavaScript框架,可以用来开发服务器端应用程序,web系统,其特点是体积小.快 ...

  8. Vue学习【第一篇】：Vue初识与指令

    什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量 ...

  9. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

随机推荐

  1. 三块sm865组建RAID0

    介绍 使用三块sm865组件raid0,cpu为6700k,主板为华硕的z170-A 这里使用的是主板自带的raid0,不是win10自带的带区卷 CrystalDiskMark AS SSD Ben ...

  2. JDOJ 2982: 最大连续子段和问题

    洛谷 P1115 最大子段和 洛谷传送门 JDOJ 2982: 最大连续子段和问题 JDOJ传送门 题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入格式 第一行是一个正整数NN, ...

  3. 【Nginx】在Windows下使用Nginx解决前端跨域问题

    提出问题:因为一些历史原因,后台代码不能动.请求别人的接口拿数据显示在前端,怎么办呢? 分析问题:通过ajax请求. 解决问题:因为浏览器的同源策略,所以需要解决跨域问题.(同源策略:请求的url地址 ...

  4. java 补充（final、static）

    final 固定的 final  修饰类的时候,只能作为子类继承,不能作为父类. final 定义变量时,必须给成员变量赋值.------  1.直接赋值  2.构造方法. final 修饰成员方法时 ...

  5. 一本通 1615：【例 1】序列的第 k 个数

    传送门 我在这里! 思路 输入一个序列的前三个数并求出这个序列的第K项,这个数列不是等比序列就是等差数列,等差数列比较好判断,如果序列中\(a_{i+2}-a_{i+1}=a_{i+1}-a_{i}\ ...

  6. PID optimizer

    如何评价PID optimizer? 论文链接:http://www4.comp.polyu.edu.hk/~cslzhang/paper/CVPR18_PID.pdf作者github:https:/ ...

  7. 基于web公交查询系统---搭建mvc连接数据库（我的毕业设计，进度继续）

    建立一个spring的项目:我在已经做过的项目基础下做的,所以接口连接数据库挺快. 搭建好的.对应好数据库: 前几天进度已经完成简单的设计: 完成登录,用户管理(修改删除). 继续的数据库的信息获取, ...

  8. Qt QThread两种方式的使用：1-继承QThread重写run函数； 2- 继承QObject并moveToThread && 消息和槽在线程和依附线程间的传递

    2019年08月18日起笔 方式一:继承QThread重写run函数 MyThread.h ----------------------------------- ... class MyThread ...

  9. java web开发入门四（spring）基于intellig idea

    spring 1.spring简介 Spring框架,可以解决对象创建以及对象之间依赖关系的一种框架. 且可以和其他框架一起使用:Spring与Struts,  Spring与hibernate (起 ...

  10. springboot做api服务时不使用thymeleaf的相关警告DefaultTemplateResolverConfiguration 的消除

    springboot在不配置thymeleaf相关属性的情况下,会提示如下的问题 DefaultTemplateResolverConfiguration - Cannot find template ...