前端开发学习 (三) 列表功能

一、列表功能

1、列表功能

    
    
    
    
    
    





    

        
编号
        
名称
        
创建时间
        
操作
        

            
{{item.id}}
            
{{item.name}}
            
{{item.ctime}}
            
删除
        
    

数据是存放在data的list中的，将data中的数据通过v-for遍历给表格  

2、无数据时，增加提示

如果list中没有数据，那么表格中就会只显示表头，这样显然不太好看

为此，我们需要增加一个v-if判断：当数据为空时，显示提示

    
    
    
    
    
    





    

        

        

            
编号
            
名称
            
创建时间
            
操作
        
        

        

            

                
{{ item.id }}
                
{{ item.name }}
                
{{ item.ctime }}
                
删除
            
        

        

            

                
列表无数据
            
        
    

 colspan="4"指的是让当前这个横跨4个单元格的位置

 

3、item的添加表格数据

1、用户填写的数据单独存放在data属性里，并采用v-model进行双向绑定

2、用户把数据填好后，点击add按钮。此时需要增加一个点击事件的方法，将data中的数据放到list中（同时，清空文本框中的内容）

3、将数据展示出来。v-for有个特点：当list数组发生改变后，vue.js就会自动调用v-for重新将数据生成，这样的话，就实现了数据的自动刷新

    
    
    
    
    
    






    


        编号：
        名称：

        添加
    

    

        
编号
        
名称
        
创建时间
        
操作
        

            
列表无数据
        
        

            
{{item.id}}
            
{{item.name}}
            
{{item.ctime}}
            
删除
        
    

4、item的删除表格数据

    
    
    
    
    
    






    


        编号：
         名称：
        

        添加
    

    

        
编号
        
名称
        
创建时间
        
操作
        

            
列表无数据
        
        

            
{{item.id}}
            
{{item.name}}
            
{{item.ctime}}


            
            

                删除
            

        
    

5：按条件筛选item

     我们要实现的效果是，在搜索框输入关键字 keywords，列表中仅显示匹配出来的内容

也就是说之前 v-for 中的数据，都是直接从 data 上的list中直接渲染过来的

     现在我们在使用v-for进行遍历显示的时候，不能再遍历全部的 list 了；我们要自定义一个 search 方法，同时，把keywords作为参数，传递给 search 方法。即v-for="item in search(keywords)"

  在 search(keywords) 方法中，为了获取 list 数组中匹配的item，我们可以使用filter + includes()方法

案例

    search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item

        var newList = this.list.filter(item => {
            // 注意 ： ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含的字符串')
            //  如果包含，则返回 true ，否则返回 false
            if (item.name.includes(keywords)) {
                return item
            }
        })

        return newList
    }

完整代码

    
    
    
    
    
    






    


        编号：
         名称：
        

        添加
        搜索：
        

    

    

        
编号
        
名称
        
创建时间
        
操作
        

            
列表无数据
        
        

            
{{item.id}}
            
{{item.name}}
            
{{item.ctime}}
            
            

                删除
            
        
    

 

二、自定义过滤器

Vue.js 允许我们自定义过滤器，可被用作一些常见的文本格式化

过滤器可以用在两种表达式中，mustache 插值表达式和 v-bind表达式

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示

#官方文档
http://v1-cn.vuejs.org/guide/custom-filter.html

     我们可以用全局方法Vue.filter()自定义一个全局过滤器。这样的话，每一个Vue的对象实例（每一个VM实例）都可以拿到这个过滤器。 他需要接受两个参数(过滤器名称、过滤器函数)

比如说，我要将 （曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人） 这句 msg 中的“单纯”改为“邪恶”

1、定义插值表达式的方法

{{ msg | msgFormat }


#说明
#1、管道符前面的msg是要把msg这段文本进行过滤
#2、管道符后面的msgFormat，是通过msgFormat这个过滤器进行来操作

 2、定义过滤器函数

        // Vue.filter 中的第一个参数是过滤器的名称，第二个参数是具体的过滤器函数
        // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
        Vue.filter('msgFormat', function (myMsg) {  // function 的第一个参数指的是管道符前面的 msg
            // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
            return myMsg.replace(/单纯/g, '邪恶')
        })


//说明
//1、 上面代码中Vue.filter(‘过滤器的名称’, 具体的过滤器函数)`中的
    //第一个参数指的就是过滤器的名称，他必须和管道符后面的名称完全一致
    //第二个参数是具体的过滤器函数


//2、过滤器函数function中，第一个参数指的管道符前面的msg


//3、replace()方法是用来做字符串的替换的。第一个参数如果只写成单纯
//那么就会只修改 msg 中的第一个`单纯`字样。所以这里就用正则去匹配msg 中所有的`单纯`字样

 3、案例

    
    
    
    
    
    






    
    
{{ msg | msgFormat }}

后续我们可以通过这个方法，将请求api返回的json数据，取出他们的名称，比如name然后转换成其他的中文名称展示

三、给过滤器添加多个参数

上面的举例代码中，`{{ msg | msgFormat }}`中，过滤器的调用并没有加参数，其实它还可以添加多个参数，接下来我们基于上面的代码进行改进

1、过滤器加一个参数

#原代码
{{ msg | msgFormat }}


#修改后

#在插值表达式中添加一个参数
{{ msg | msgFormat('xxx') }}

在插值表达式中添加携带参数后，也需要在过滤器函数中，添加(myMsg, arg2) 中的arg2就是接受传参，如下

    // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
    Vue.filter('msgFormat', function (myMsg, arg2) {
        // 字符串的  replace 方法：第一个参数，除了可写一个 字符串之外，还可以定义一个正则；第二个参数代表要替换为上面的xxx
        //将 myMsg 中的所有`单纯`字样，修改为 arg2
        return myMsg.replace(/单纯/g, arg2)
    })

 

全量代码

    
    
    
    
    
    






    
    
{{ msg | msgFormat('xxx') }}

2、过滤器加两个参数

    
    
    
    
    
    





    
    
    
{{ msg | msgFormat('【牛x】', '【参数arg3】') }}

 

3、同时使用多个过滤器

    
    
    
    
    
    





    
    
    
{{ msg | msgFormat('【牛x】', '【参数arg3】') | myFilter2}}

添加了多个过滤器，是将 msg 交给第一个过滤器来处理，然后将处理的结果交给第二个过滤器来处理 。  

4、时间格式化  案例1

    
    
    
    
    
    





    {{ time }}
    
 {{ time | datefmt }}



    {{ time | datefmt }}

5、时间格式化 案例2

    
    
    
    
    






    2018-05-25T14:06:51.618Z
    
 {{ '2018-05-25T14:06:51.618Z' | dateFormat }}

6、时间格式化  案例3

    
    
    
    
    






    2018-05-25T14:06:51.618Z
    
 {{ '2018-05-25T14:06:51.618Z' | dateFormat }}

四 、自定义私有过滤器

私有过滤器：在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。

 

案例 日期格式化

    
    
    
    
    






    {{ time }}
    

    {{ time | datefmt }}