Vue3中computed的使用
方式一import {computed,reactive} from 'vue'export default {name: "LayoutAside",setup() {let menuData = reactive(computed(()=>{ //vue3中computed的使用return store.state.menus.menuList}))return {menuData}}}
·
方式一
import {computed,reactive} from 'vue'
export default {
name: "LayoutAside",
setup() {
let menuData = reactive(computed(()=>{ //vue3中computed的使用
return store.state.menus.menuList
}))
return {
menuData
}
}
}
</script>
方式二
<template>
<h2>输入待求平方的数字:<input type="text" v-model="digit"></h2>
<div>{{digit}}的平方是:{{square}}</div>
</template>
<script>
import { ref, computed } from 'vue'
export default {
setup() {
const digit = ref(1)
const square = computed(() => {
return +digit.value * +digit.value
})
return {
digit
}
}
}
</script>
方式三
<template>
<div>
<p><input type="text" v-model="age"></p>
</div>
</template>
<script>
import { computed } from 'vue'
export default {
setup() {
const age = computed({
get() {
return +age.value+1
},
set(value) {
return age.value = value - 1
}
})
return {
age
}
}
}
更多推荐
所有评论(0)