vue属性方法

计算属性

有事后台传入的事件数据是时间戳，而我们界面要展示的是时间字符串，所以就需要计算属性computed，使用方法如下：

<template>
  <div>
    <button @click="handleClick"> 点我啊 </button>
    <input v-model="inputData" type="text"/>
    {{result}}
  </div>
</template>

<script>
  export default {
    name: 'child',
    computed: {  // 计算属性
      result() {  // 使用该字段返回值
        return this.inputData + '111';
      }
    },
    data() {
      return {
        inputData: '',
        returnData: '洞拐洞拐，我是子类传回的数据'
      }
    },
    methods: {
      handleClick() {
        console.log('点击了子类的点击');
        this.$emit('childClick', this.returnData)
      }
    }
  }
</script>

<style scoped>

</style>

还有一种使用方法返回

<template>
  <div>
    <p v-text="currTime()"></p>
    {{currTime()}}
  </div>
</template>

<script>
  export default {
    name: 'child',
    data() {
      return {
      }
    },
    methods: {
      currTime() {
        return new Date().toLocaleDateString();
      }
    }
  }
</script>

<style scoped>

</style>

两种方法都能实现的结果但有些不一样
使用计算属性获得初始值后只有当属性的返回值有变化时才会赋值到控件上
使用方法返回值时可以在控件调用的时候都获得最新的值

监听属性

watch的使用

    watch: {
      inputData(newVal, oldVal) {
        console.log(newVal,oldVal)
      }
    },
    data() {
      return {
        inputData: ''
      }
    }