Vue 计算属性和侦听器

1.计算属性

<template>
  <!--计算属性demo-->
  <div id="example">
    <p>Original message:{{msg}}</p>
    <p>Reversed {{msg.split('').reverse().join('')}}</p>
    <p>Computed Reversed {{reversedMsg}}</p>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  computed: {
    reversedMsg: function () {
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>
<style>
</style>

2.计算属性方法

<template>
  <!--计算属性demo-->
  <div id="example">
    <p>Original message:{{msg}}</p>
    <p>Reversed {{msg.split('').reverse().join('')}}</p>
    <p>Computed Reversed {{reversedMsg}}</p>
    <p>计算方法:{{reveredMsgs()}}</p>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    // 计算属性方法
    reveredMsgs: function () {
      return this.msg.split('').reverse().join('')
    }
  },
  computed: {
    reversedMsg: function () {
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>
<style>
</style>