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 代码：

  
    
    
    
    
    
    
    
  
  
    

      
      

        
添加和查询学生
        

          
          

            

              

                
学生名字
              
              
              
            

            
            添加学生
          
          
          

            

              

                
输入关键字
              
              
              
            

            
            查询学生
          
        
      

      
      

        

          

            
#
            
学生名字
            
年龄
            
状态
            
创建时间
            
操作
          
        
        
        

          
          

            
{{ item.id }}
            
{{ item.name }}
            
{{ item.age }}
            

              

                
                已开启
                已禁用
              
            
            
{{ item.Datetime | datafamat }}
            

              删除
            
          
        
      
    

    
    
  

导入放入 html 文件中，导入bootstrap4,导入vue，即可直接游览器打开运行。

完整打包的代码可以到gitee下载：

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

到github下载： 

858399075/vuedemo · GitHub

运行演示：

 输入名字添加学生，添加成功自动清空输入框的值：

输入关键可以模糊查询：

点击删除会直接删除对应的列表：