过滤器其实就是一个函数,把当前的值传递到函数里面,加工处理后,返回到当前,过滤器使用|(管道符),默认传递参数,如果还要传递参数就要手动传递
过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
<template>
<div class="hello">
我是about0页面
<div id="div1">
{{name | formatname}}
<!--<span v-text="name | wrapAB(5)"></span>-->
<input type="text" v-model="name">
<h2>{{name}}</h2>
<hr>
<input type="text" v-model="age">
<h2>{{age}}</h2>
<input type="text" v-model="user.age">
<h2>{{user.age}}</h2>
<el-button @click="dosubmit" type="primary">提交</el-button>
</div>
</div>
</template> <script> import {formatDate} from '../util/filters'
export default {
name: 'about',
data () {
return {
name:'Tom',
age:,
user:{
id:,
age:
}
}
},
methods:{
dosubmit(){
this.user.id=Math.random();////深度监视，当对象中的属性发生变化时会被监控 //方式二：监控vue实例的数据
//当按钮被点击一次以后，全局上就被监听了，只要变就会console
this.$watch('name',function(newValue,oldValue){
console.log('name的newValue值为：'+newValue+'，旧值为:'+oldValue);
}); }
},
watch:{
//方式一:监控vue实例的数据
age:(newValue,oldValue) => {
console.log('name的newValue值为：'+newValue+'，旧值为:'+oldValue);
},
user:{
handler:(newValue,oldValue) => {
console.log('age的newValue值为：'+newValue.age+'，旧值为:'+oldValue.age);
//原来的旧值已经看不见了，只能看到新的值
},
deep: true //深度监视，当对象中的属性发生变化时会被监控
}
},
filters: {
formatname (value) {
return value.split('').reverse().join('')
},
//多参数传值有问题，无解
//wrapAB(value, val) {
// return value+val
//}
} }
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> </style>