vue3.0 computed使用
Vue2:
export default {
computed:{
//计算属性方法
},
}
Vue3:
- 方法1:
export default {
computed:{
//计算属性方法
},
}
- 方法2:
import { computed } from 'vue'
const reverseMsg = computed(() => {})
完整示例
<!-- home.vue -->
<template>
<div>
<h1>{{msg}}</h1>
<h1>{{reverseMsg}}</h1>
<hr>
<el-button type="primary" @click="handleName">修改</el-button>
</div>
</template>
<script>
// 按需导入
import {
reactive,
toRefs,
ref,
computed
} from 'vue'
export default {
setup() {
const msg = ref("hello Vue3-computed");
// 将 msg 倒序
// computed:创建计算属性方法
const reverseMsg = computed(() => {
return msg.value.split('').reverse().join('')
})
console.log(reverseMsg)
return {
msg,
reverseMsg
}
},
methods: {
handleName() {
this.msg = this.reverseMsg
}
},
}
</script>
<style>
</style>