一、过滤器
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind
表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示。
1. filters
filters不是必须使用的内容,使用computed,methods都可以完成。
定义: 对要显示的数据进行特定格式化后再显示(用于一些简单逻辑)。
过滤器可以接收额外的参数,多个过滤器也可以进行串联。并没有改变原数据,产生了一个新的数据。不单只能修改插值符,还可以修改v-bind 。
new Vue({ filters:{ 局部注册 }})
全局注册
Vue.filter()
例: 将时间戳转化为日常格式。
<div id="root">
<h2>开始</h2>
<p>现在是:{{time}} </p>
<hr>
<p>现在是:{{time}} ---- computed</p>
<hr>
<p>现在是:{{timeFun()}} ---- methods</p>
<hr>
<!-- filters通过管道符 | -->
<!-- 源数据 | -->
<p>现在是:{{time | dateFilt}} ---- filters</p>
<hr>
<p>现在是:{{time | dateFilt | slicedate}} ---- filters</p>
<hr>
<p>现在是:{{time | aa('YYYY$MM$DD')}} ---- aa1使用$</p>
<p>现在是:{{time | aa('YYYY¥MM¥DD')}} ---- aa2使用¥</p>
<div :ss="str | slicedate"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
let vm = new Vue({
el: "#root",
data() {
return {
time: Date.now(),
str:"123456789"
}
},
computed: {
getTime() {
return dayjs(this.time).format('YYYY年MM月DD HH:mm:ss');
}
},
methods: {
timeFun() {
return dayjs(this.time).format('YYYY年MM月DD HH:mm:ss');
}
},
//过滤属性
filters: {
// 默认接收原数据的值
dateFilt(val) {
console.log("dateFilt:", arguments);
// 返回值 覆盖原数据 页面显示过滤函数的返回值
return dayjs(val).format('YYYY年MM月DD HH:mm:ss');
},
slicedate(val) {
console.log("slicedate:", arguments);
return val.slice(5)
},
aa(val, key) {
console.log("val, key", val, key);
return dayjs(val).format(key);
}
}
})
2. 全局注册与局部注册
<style>
#box {
height: 200px;
background-color: green;
}
#app {
margin-top: 20px;
height: 200px;
background-color: blue;
}
</style>
<div id="box">
组件1-----------{{name | changeName}}
</div>
<div id="app">
组件2------------{{name | changeName}}
</div>
// 全局注册
Vue.filter("changeName", function (val) {
return val + "global";
})
// 局部注册
// 组件1
new Vue({
el: "#box",
data() {
return {
name: "尤雨溪",
}
},
filters: {
changeName1(val) {
return val + "aaa";
}
}
})
// 组件2
new Vue({
el: "#app",
data() {
return {
name: "任正非"
}
},
filters: {
changeName2(val) {
return val + "bbb";
}
}
})
总结:
全局在vue组件任何位置都可以使用;
局部只能在当前vue组件中使用;
组件1 不能使用组件2的filters;
组件2 不能使用组件1的filters。
3. 重新渲染
来看一段代码:
<div id="root">
{{name}}
<hr>
{{fun1}}---{{fun2()}}
</div>
// 重新渲染
let vm = new Vue({
el:"#root",
data(){
return {
name:"尤雨溪",
}
},
computed:{
fun1(){
console.log("fun1");
return "fun1:123";
}
},
methods:{
fun2(){
console.log("fun2");
return "fun2:456";
},
fun3(){
console.log("fun3");
return "fun3:789";
}
}
})
总结:
可以看到,页面第一次渲染时,执行了fun1和fun2函数方法,当修改数据name之后又执行了fun2方法。
所以页面中data数据更新时,Vue会重新渲染模板,重新获取模板中的数据,重新执行模板中的方法。