方式一

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
    }
  }
}
Logo

前往低代码交流专区

更多推荐