1.前言
1.v3廢除了過(guò)濾器
2.但是過(guò)濾器也是開(kāi)發(fā)中非常常用的功能,因?yàn)榇蠖鄶?shù)時(shí)候還是需要對(duì)服務(wù)器返回的數(shù)據(jù)進(jìn)行進(jìn)一步的整理
2. v3 替代方案methods
方法的返回值就是顯示的內(nèi)容
<p>{{formatTime(time)}}</p>
methods
formatTime(time) {
//參數(shù) 時(shí)間戳轉(zhuǎn)成 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)
//時(shí)分秒 2021-12-12 12:23自己轉(zhuǎn)
return `${year}-${month}-${day}`
},
注意一定得寫(xiě)
return
- computed方案
<h1>反轉(zhuǎn):{{reverseMsg}}</h1>
reverseMsg(){
return this.msg.split("").reverse().join("")
},
4. 回顧下 v2的過(guò)濾器用法
<!-- 函數(shù)返回值 -->
<p v-text="changeMsg()"></p>
<!-- filter 過(guò)濾器 默認(rèn)要過(guò)濾的數(shù)據(jù)就是第一個(gè)參數(shù)-->
<p>{{msg | getStr}}</p>
<!-- 如果有多個(gè)參數(shù) 在過(guò)濾器方法后面?zhèn)魅氲诙€(gè)及以上參數(shù) -->
<p>{{"陳紅軍" | getData(A,B)}}</p>
new Vue({
el:"#app",
data:{
msg:"hello",
count:1,
A:"辛苦了",
B:"致敬",
},
methods:{
changeMsg(){
return this.msg +"改變"
}
},
// 過(guò)濾器 filters 注意加 s 多個(gè)
filters:{
getStr(v){
// 過(guò)濾器里面的函數(shù)方法 ,this指向window,
// 是因?yàn)?vue中不建議 過(guò)濾器參與業(yè)務(wù)邏輯,
// 所以過(guò)濾函數(shù)中 不能通過(guò)this訪(fǎng)問(wèn) 組件對(duì)象
console.log(this)
console.log("------v:",v)
v+= "你好"
return v
},
getData(name,a,b){
// 默認(rèn)第一個(gè)參數(shù) 就是過(guò)濾器 過(guò)濾的 變量
console.log(a,b)
return name+a+b
}
}
})
5. 總結(jié)
其實(shí) 方法和 計(jì)算屬性 在v2里面也經(jīng)常使用,只是因?yàn)闆](méi)有去刻意的當(dāng)做 過(guò)濾器來(lái)使用而已,v3只是更好的利用原有的能力
