1.前言
1.v3废除了过滤器
2.但是过滤器也是开发中非常常用的功能,因为大多数时候还是需要对服务器返回的数据进行进一步的整理
2. v3 替代方案methods
方法的返回值就是显示的内容
<p>{{formatTime(time)}}</p>
methods
formatTime(time) {
//参数 时间戳转成 2021-11-10
let d = new Date()
d.setTime(time)
let year = d.getFullYear()
let month = d.getMonth() + 1
month = month.toString().padStart(2, 0)
let day = d.getDate()
day = day.toString().padStart(2, 0)
//时分秒 2021-12-12 12:23自己转
return `${year}-${month}-${day}`
},
注意一定得写
return
- computed方案
<h1>反转:{{reverseMsg}}</h1>
reverseMsg(){
return this.msg.split("").reverse().join("")
},
4. 回顾下 v2的过滤器用法
<!-- 函数返回值 -->
<p v-text="changeMsg()"></p>
<!-- filter 过滤器 默认要过滤的数据就是第一个参数-->
<p>{{msg | getStr}}</p>
<!-- 如果有多个参数 在过滤器方法后面传入第二个及以上参数 -->
<p>{{"陈红军" | getData(A,B)}}</p>
new Vue({
el:"#app",
data:{
msg:"hello",
count:1,
A:"辛苦了",
B:"致敬",
},
methods:{
changeMsg(){
return this.msg +"改变"
}
},
// 过滤器 filters 注意加 s 多个
filters:{
getStr(v){
// 过滤器里面的函数方法 ,this指向window,
// 是因为 vue中不建议 过滤器参与业务逻辑,
// 所以过滤函数中 不能通过this访问 组件对象
console.log(this)
console.log("------v:",v)
v+= "你好"
return v
},
getData(name,a,b){
// 默认第一个参数 就是过滤器 过滤的 变量
console.log(a,b)
return name+a+b
}
}
})
5. 总结
其实 方法和 计算属性 在v2里面也经常使用,只是因为没有去刻意的当做 过滤器来使用而已,v3只是更好的利用原有的能力
网友评论