Vue.js学习之路(二)：表格新增、删除、搜索、过滤实例(基础)

本文链接：https://blog.csdn.net/stefan_j/article/details/85164376
Vue的简单应用：品牌管理案例

1、v-model、v-for、v-bind、v-bind等常用指令的应用
2、事件修饰符的使用
3、过滤器的使用
4、数据双向绑定模型
5、数据的增、删操作
6、数组以及字符串的常用操作
7、ES6的一些语法以及新方法的使用
<!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>品牌管理</title>
    <script src="../Script/Vue-2.5.1.8.js"></script>
    <link rel="stylesheet" href="../CSS/BootStrap-3.3.7.css">
</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>品牌名称：<input type="text" class="form-control" v-model="brandName"></label>
                <input type="button" value="添加" class="btn btn-primary" @click="add()">
                <label>关键字搜索：</label>
                <input type="text" class="form-control" v-model="keywords">
        </div>
        </div>
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>BrandName</th>
                    <th>UpdateTime</th> 
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <!--v-for中的数据不再是直接从data中获取，而是通过search方法对data中的数据进行过滤再显示-->
                <tr v-for="(brand,index) in search(keywords)" :key="brand.id">
                    <td>{{brand.id}}</td>
                    <td>{{brand.brandName}}</td> 
                    <td>{{brand.updateTime | dateFormat('yyyy-mm-dd hh:mm:ss')}}</td>
                    <td><a href="#" @click.prevent="del3(brand.id)" key>删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        //定义一个时间格式化的全局过滤器
        Vue.filter('dateFormat', function(dateStr,pattern){
            var dt=new Date(dateStr);//根据给定的字符串得到特定的时间
            //yyyy-mm-dd
            var year=dt.getFullYear();
            var month=dt.getMonth()+1; //从0开始
            var day=dt.getDate(); //getDay()是星期几
            //return year+'-'+month+'-'+day;
            //return `${year}-${month}-${day}`;  //yyyy-mm-dd模板字符串  ``=>tab键上面的那一个键，不是单引号
            if(pattern&&pattern.toLowerCase()==='yyyy-mm-dd'){//pattern有值(有定义)且为'yyyy-mm-dd'
                return `${year}-${month}-${day}`;
            }
            else{
                var hh=dt.getHours();
                var mm=dt.getMinutes();
                var ss=dt.getSeconds();
                return `${year}-${month}-${day} ${hh}:${mm}:${ss}`;
            }
        });

        var vm=new Vue({
            el:'#app',
            data:{
                id:'',
                brandName:'',
                keywords:'',
                brandsList:[
                    {id:1,brandName:'得力',updateTime:new Date()},
                    {id:2,brandName:'科力普',updateTime:new Date()},
                    {id:3,brandName:'晨光',updateTime:new Date()},
                    {id:4,brandName:'英雄',updateTime:new Date()}
                ]
            },
            methods:{
                add(){//在Vue中，数据已经双向绑定，当data里面的数据变化，页面会随之更新。
                    var brand={id:this.id,brandName:this.brandName,updateTime:new Date()};//构建对象
                    this.brandsList.push(brand);//更新数据
                    this.id=this.brandName='';//从右向左串联赋值
                },
                del1(index){//根据索引删除,需要在html中标明index
                    this.brandsList.splice(index,1); //根据索引删除
                },
                del2(id){//根据id找index删除
                this.brandsList.some((brand,index)=>{//数组some()方法返回true立即终止数组遍历
                    if(brand.id==id)
                    {
                        this.brandsList.splice(index,1);
                        return true;
                    }
                })
              },
              del3(id){//根据id找index删除
                  var index=this.brandsList.findIndex(b=>{
                      if(b.id==id){
                          return true;
                      }
                  })
                  this.brandsList.splice(index,1);
              },
              search2(keywords){
                  var newList=[];//存储过滤后的数据
                  this.brandsList.forEach(element => {//遍历数组
                      if(element.brandName.indexOf(keywords)!=-1){//包含
                      newList.push(element);
                      }
                  });
                  return newList;
              },
              //注意forEach、some、filter、findIndex数组遍历新方法的使用
              search(keywords){
                  var newList=[];
                  //  if(item.brandName.indexOf(keywords)!=-1)
                  return this.brandsList.filter(item => {//此处不用中间变量newList，直接return
                      if(item.brandName.includes(keywords)==true){//ES6中的方法，判断字符串是否被包含，被包含返回true；
                          return item;
                      }
                  });
                  //return newList;  //直接在外面return
              }
            } 
        });
    </script>
</body>
</html>