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>