<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>