Vue框架 - 简析过滤器的原理及其应用

简析过滤器的原理及其应用

过滤器的实质 就是数据处理的一种方式，对所需内容进行二次操作（过滤）

原始过滤器

过滤器本应该就是一段负责处理原始数据的代码，只是被封装起来而已。

    <div id="app">
        <li v-for="item of items">
            <span>品名：{{item.name}}</span>
            <span>-</span>
            <span>价格：{{rmb(item.price,"￥")}}</span>
        </li>
    </div>

    <script>
        let app = new Vue({
            el:"#app",
            data:{
                items:[
                    {id:1,name:"iPhone",price:"8888"},
                    {id:2,name:"iPad",price:"12888"},
                    {id:3,name:"Mac",price:"18888"}
                ]
            },
            methods:{
            	// rmb 方法 去处理数据然后返回 对应的值
            	// 达到处理过滤器的效果
                rmb(price,flag){
                						//	取小数点后两位		
                    return `${flag}` + (price/50).toFixed(2);
                }
            }
        })
    </script>

Vue过滤器

类似于 管道流 的处理方式
管道流： 将过滤器的结果，以参数（第一位）的形式传递给下一层
默认第一个参数来自上一层的处理结果（ 不需要写 ），我们要写的只是第二个参数

• Vue.filter ( “过滤器名称”，过滤方式 )

    <div id="app">
        <li v-for="item of items">
            <span>品名：{{item.name}}</span>
            <span>-</span>
            <span>价格：{{item.price | Rmb("$") }}</span>
        </li>
    </div>
 
    <script>
        Vue.filter("Rmb",function(price,flag){
            return `${flag}` + (price/50).toFixed(2);
        })
        let app = new Vue({
            el:"#app",
            data:{
                items:[
                    {id:1,name:"iPhone",price:"8888"},
                    {id:2,name:"iPad",price:"12888"},
                    {id:3,name:"Mac",price:"18888"}
                ]
            }
        });
	</script>

• 使用 原始函数 过滤器
  函数式编程 r4(r3(r2(r1(ppt,1),2),3),4)
• 使用 Vue过滤器
  Vue过滤器编程 ppt | r1(1) | r2(2) | r3(3)

Vue实现选项卡效果

• 点击按钮触发函数（带参数）修改 sex 的值
  同时控制 class 类名 .active 的显示 / 隐藏
• 生成新的数据 showUsers ，负责页面的显示

    <style>
        .active{
            color: coral;
        }
    </style>
    <div id="app">
        <button :class="{active:sex===''}" @click = "getUsers('')">全部</button>
        <button :class="{active:sex==='男'}" @click = "getUsers('男')">男</button>
        <button :class="{active:sex==='女'}" @click = "getUsers('女')">女</button>
        <hr>
        <ul>
            <li v-for="user of showUsers">
                {{user.name}}-{{user.sex}}
            </li>
        </ul>
    </div>
    <script>
        let users = [
                    {id:1,name:"秦",age:"23",sex:"男"},
                    {id:2,name:"兟",age:"22",sex:"男"},
                    {id:3,name:"侁",age:"24",sex:"男"},
                    {id:4,name:"李",age:"24",sex:"女"},
                    {id:5,name:"赵",age:"23",sex:"女"},
                ]
        let app = new Vue({
            el:"#app",
            data:{
                users, // 原数据
                showUsers:users, // 计算得到的数据
                sex:""
            },
            methods:{
                getUsers(gender){   
                    this.sex = gender;               
                    if (gender === "") {
                        return this.showUsers = this.users;
                    }else{
                        return this.showUsers =  this.users.filter( user => user.sex === gender)
                    }
                }
            }
        });
    </script>

借用Vue中computed属性 实现

• computed
  • 存放计算得到的数据
  • 依赖于 data 中的数据 ---- 存储 被计算过的数据，以及计算的过程
    如果数据需要二次或者多次处理，就属于计算属性

    <style>
        .active{
            color: coral;
            font-weight: bold;
        }
    </style>
    <div id="app">
        <button :class="{active:sex===''}" @click = "sex=''">全部</button>
        <button :class="{active:sex==='男'}" @click = "sex='男'">男</button>
        <button :class="{active:sex==='女'}" @click = "sex='女'">女</button>
        <hr>
        <ul>
            <li v-for="user in showUsers">
                <input type="checkbox" v-model="user.checked">
                {{user.name}}-{{user.sex}}
            </li>
        </ul>
        <!-- v-model: 
            代替标签触发自身的事件，不同的标签触发的事件不同
            input onchange
         -->
        <input type="checkbox" v-model="checkAll">全选
    </div>

    <script>
        let users = [
            {id:1,name:"秦",age:"23",sex:"男",checked:false},
            {id:2,name:"兟",age:"22",sex:"男",checked:false},
            {id:3,name:"李",age:"24",sex:"女",checked:false},
            {id:4,name:"武",age:"23",sex:"女",checked:false},
        ]

        let app = new Vue({
            el:"#app",
            data:{
                users, // 原数据
                // showUsers:users, // 计算得到的数据
                sex:"",
                // checkAll:false
            }, 
            computed:{
                showUsers:{
                    get(){
                        console.log(this.sex)
                        if (this.sex === "") {
                            return  this.users;
                        }else{
                            return this.users.filter( user => user.sex === this.sex )
                        }
                    }
                },
                checkAll:{
                    get(){
                        // every() 全真才真
                        return this.users.every( user => user.checked )
                    },
                    set(newValue){
                        // return this.users.forEach(el => {
                        //     el.checked = newValue;
                        // });

                        this.users = this.users.map(user =>{
                            return {...user,...{checked:newValue}};
                        })
                    }
                }
            }
        });
    </script>