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>