computed
<template>
<div>
{{reversedMessage}}
</div>
</template>
<script>
export default {
data(){
return{
message:'Hello Vue!'
}
},
computed:{
reversedMessage(){
return this.message.split('').reverse().join('')//反转字符串
}
}
}
</script>
<style>
</style>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6fbfbec2ffd3cdc63fdf702fb920fe56.png)
watch
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c0e81b200dd2d75e6ce2105f5b9219c6.png)
<template>
<div>
<button @click="num++">长一岁</button>
<p>{{num}}</p>
</div>
</template>
<script>
export default {
data(){
return{
num:0
}
},
watch:{//监听num的变化
num(newVal,oldVal){//新值,旧值
console.log(newVal,oldVal)
}
}
}
</script>
<style>
</style>```