简析过滤器的原理及其应用
过滤器的实质 就是数据处理的一种方式,对所需内容进行二次操作(过滤)
原始过滤器
过滤器本应该就是一段负责处理原始数据的代码,只是被封装起来而已。
<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>