vue过滤器和案例实现

使用vue插件

• 使用chrome浏览器调试插件Vue.js devtools
• 添加一行代码Vue.config.devtools = true;
  
  

  使用devtools插入代码.png

vue调试面板.png

---

vue过滤器

1. 过滤器只会改变显示结果,而不是修改数据
2. 过滤器调用时候的格式

{{msg|msgFormat}}

3. 定义一个过滤器，把显示结果你改成他，只会修改第一个（放在script标签的开头？放在结尾的时候没有显示效果）

Vue.filter('msgFormat',function(msg){
                return msg.replace('他','你')
            })

data:{
      msg:'他的朋友，他的敌人'
    },

修改效果.png

4. 除了可以写一个字符串之外，还可以定义一个正则，将所有‘你’改成‘他’

Vue.filter('msgFormat',function(msg){
                return msg.replace(/他/g,'你')
            })

全部关键字修改.png

5. 传入一个参数的过滤器

Vue.filter('msgFormat',function(msg,arg){
                return msg.replace(/他/g,arg)
            })

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

传入参数修改.png

6. 定义格式化时间的全局过滤器

Vue.filter("dateFormat",function(dateStr){
                var dt=new Date(dateStr)
                var y=dt.getFullyear()
                var m=dt.getMonth()+1
                var d=dt.getDate()
                return `${y}-&{m}-${d}`
            })

修改前显示效果.png

过滤后效果.png

7. 使用过滤器再添加上时分秒

if(pattern.toLowerCase()==='yyyy-mm-dd'){
                return `${y}-${m}-${d}`}
                else{
                    var hh=dt.getHours()
                    var mm=dt.getMinutes()
                    var ss=dt.getSeconds()
                    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                }

最终效果.png

8. 全局过滤器就是所有的vm实例都共享的
9. 定义私有过滤器,过滤器有两个条件[过滤器名称和处理函数]，过滤器调用时采用就近原则，如果私有过滤器和全局过滤器名称一致，优先调用私有过滤器定义私有过滤器,过滤器有两个条件[过滤器名称和处理函数]，过滤器调用时采用就近原则，如果私有过滤器和全局过滤器名称一致，优先调用私有过滤器

var vm=new Vue({
                el:'#div1',
                data:{
                    msg:'他的朋友，他的敌人'
                },
                methods:{
                    
                },
                filters:{//定义私有过滤器,过滤器有两个条件[过滤器名称和处理函数]
                    dataFormat:function(dataStr,pattern){
                        var dt=new Date(dateStr)
                        var y=dt.getFullYear()
                        var m=dt.getMonth()+1
                        var d=dt.getDate()
                        if(pattern.toLowerCase()==='yyyy-mm-dd'){
                        return `${y}-${m}-${d}`}
                        else{
                            var hh=dt.getHours()
                            var mm=dt.getMinutes()
                            var ss=dt.getSeconds()
                            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                        }
                    }
                }
            })

---

列表案例

1. 根据id添加列表
2. 根据id实现删除效果

删除

                    del(id){//删除列表
                        this.list.some((item,i)=>{
                            if(item.id==id){//id是否匹配
                                this.list.splice(i,1)//实现删除
                                return true;
                                //在some方法中,如果热return true,就会立即终止这个数组循环
                            }
                        })
                    }

或者

                    del(id){//删除列表
                        var index=this.list.findIndex(item=>{
                            if(item.id==id){
                                return true;}
                        })  
                    
                        this.list.splice(index,1)
                    }

3. 自定义一个search方法来代替从list中直接获取数据

4. 实现在文本框中通过搜索关键字来匹配相应条目

                    
                        搜索名称关键字：
                        
                    

search(keywords){//根据关键字进行数据搜索
                    var newlist=[]
                        this.list.forEach(item=>{
                            if(item.name.indexOf(keywords) !=-1){//进行字符串匹配
                                newlist.push(item)
                            }
                        })
                        return newlist
                    }                   

search(keywords){//根据关键字进行数据搜索
                        return this.list.filter(item=>{
                            if(item.name.includes(keywords))
                            //ES6中提供一个方法 string.prototype.includes('字符串')
                            //若包含则返回true,否则false
                            {return item}
                        })
                        }

• 最终结果和完整代码

---