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只是更好的利用原有的能力