1.前言
1.v3廢除了過濾器
2.但是過濾器也是開發(fā)中非常常用的功能,因為大多數(shù)時候還是需要對服務器返回的數(shù)據(jù)進行進一步的整理
2. v3 替代方案methods
方法的返回值就是顯示的內(nèi)容
<p>{{formatTime(time)}}</p>
methods
formatTime(time) {
//參數(shù) 時間戳轉成 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的過濾器用法
<!-- 函數(shù)返回值 -->
<p v-text="changeMsg()"></p>
<!-- filter 過濾器 默認要過濾的數(shù)據(jù)就是第一個參數(shù)-->
<p>{{msg | getStr}}</p>
<!-- 如果有多個參數(shù) 在過濾器方法后面?zhèn)魅氲诙€及以上參數(shù) -->
<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){
// 過濾器里面的函數(shù)方法 ,this指向window,
// 是因為 vue中不建議 過濾器參與業(yè)務邏輯,
// 所以過濾函數(shù)中 不能通過this訪問 組件對象
console.log(this)
console.log("------v:",v)
v+= "你好"
return v
},
getData(name,a,b){
// 默認第一個參數(shù) 就是過濾器 過濾的 變量
console.log(a,b)
return name+a+b
}
}
})
5. 總結
其實 方法和 計算屬性 在v2里面也經(jīng)常使用,只是因為沒有去刻意的當做 過濾器來使用而已,v3只是更好的利用原有的能力
