vue小案例实现模糊查询、删除列表、添加列表

vue小案例实现模糊查询、删除列表、添加列表，本案例用于快速复习vue基本使用，vue指令。

bootstrap 用的是bootstrap4，在官网直接下载导入即可（v4.6.1）

vue 用的是 vue-2.6.12.js

demo 用到的知识点：

创建 vue 基本实例
v-for 循环渲染表格数据
状态渲染为“开关”，用的 bootstrap4 的表单下的 Switches 组件。
全局过滤器格式化时间
添加学生功能
点击删除对应的列表
回车提交 input 输入框，（按键修饰符：keyup.enter）
输入关键字模糊查询（名字和年龄都能查询）

完整 html 代码：


html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    
    
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <style>
      :root {
        font-size: 13px;
      }
      body {
        padding: 8px;
      }
    style>
  head>
  <body>
    <div id="app">
      
      <div class="card">
        <h5 class="card-header">添加和查询学生h5>
        <div class="card-body">
          
          <form class="form-inline" @submit.prevent>
            <div class="input-group mb-2 mr-sm-2">
              <div class="input-group-prepend">
                <div class="input-group-text">学生名字div>
              div>
              
              <input type="text" class="form-control" v-model="sname" @keyup.enter="addstu" />
            div>
 
            
            <button type="submit" class="btn btn-primary mb-2" @click="addstu">添加学生button>
          form>
          
          <form class="form-inline" @submit.prevent>
            <div class="input-group mb-2 mr-sm-2">
              <div class="input-group-prepend">
                <div class="input-group-text">输入关键字div>
              div>
              
              <input type="text" class="form-control" v-model="guanjian" @keyup.enter="getstu" />
            div>
 
            
            <button type="submit" class="btn btn-primary mb-2" @click="getstu">查询学生button>
          form>
        div>
      div>
 
      
      <table class="table table-bordered table-striped mt-2">
        <thead>
          <tr>
            <th>#th>
            <th>学生名字th>
            <th>年龄th>
            <th>状态th>
            <th>创建时间th>
            <th>操作th>
          tr>
        thead>
        
        <tbody>
          
          <tr v-for="(item,i) in list" :key="item.id">
            <td>{{ item.id }}td>
            <td>{{ item.name }}td>
            <td>{{ item.age }}td>
            <td>
              <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.status">
                <label class="custom-control-label" :for="item.id" v-if="item.status">已开启label>
                <label class="custom-control-label" :for="item.id" v-else>已禁用label>
              div>
            td>
            <td>{{ item.Datetime | datafamat }}td>
            <td>
              <a href="#" @click.prevent="sdelet(item.id,i)">删除a>
            td>
          tr>
        tbody>
      table>
    div>
 
    <script src="./lib/vue-2.6.12.js">script>
    <script>
      // 用全局过滤器格式化时间
      Vue.filter('datafamat',(str)=> {
        const dt = new Date(str)
        const y = dt.getFullYear()
        const m = padtime(dt.getMonth())
        const d = padtime(dt.getDay())
        const hh = padtime(dt.getHours())
        const mm = padtime(dt.getMinutes())
        const ss = padtime(dt.getSeconds())
        return ` ${y}-${m}-${d} ${hh}:${mm}:${ss} `
      })
      function padtime(n){
        return n > 9 ? n: "0" + n
      }
      const Vm = new Vue({
        el:'#app',
        data:{
          nextid:5,
          sname:'',
          guanjian:'',
          list:[
            { id:1,name:'张三',age:'18',status:true,Datetime:new Date() },
            { id:2,name:'张4',age:'18',status:true,Datetime:new Date() },
            { id:3,name:'张5',age:'20',status:false,Datetime:new Date() },
            { id:4,name:'张6',age:'19',status:true,Datetime:new Date() }
          ]
        },
        methods: {
          addstu() {
            if(!this.sname) return alert('学生名字不能为空')
            this.list.push({
              id:this.nextid,
              name:this.sname,
              status:true,
              Datetime:new Date()
            })
            this.sname = ''
            this.nextid++
          },
          sdelet(e,i) {
            // this.list.splice(i,1)
            this.list.splice(i,1)
          },
          getstu() {
            this.list = this.list.filter((p)=> {
              console.log(p)
              return p.name.indexOf(this.guanjian) !== -1 || p.age.indexOf(this.guanjian) !== -1
            })
            console.log(this.list)
          }
        }
      })
    script>
  body>
html>