vue过滤器和监视器的小例子
过滤器其实就是一个函数,把当前的值传递到函数里面,加工处理后,返回到当前,过滤器使用|
(管道符),默认传递参数,如果还要传递参数就要手动传递
过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数
过滤器可以用在两个地方:双花括号插值和 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:18, user:{ id:1, age:20 } } }, 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>