vue3 计算属性的使用

<script setup>
    import { ref,computed } from 'vue'
      const msg = ref(1)
      const clickMsg = () =>{ msg.value++; console.log('+++')}

      const clickMsgjj = () =>{ msg.value--; console.log('---')}
      // 一个计算属性 ref
      const publishedBooksMessage = computed(() => {
        return msg.value < 0 ? '小于零' : '大于零'
      })


</script>

<template>
  <div style="float:left; width: 100%;">
    publishedBooksMessage--- {{ publishedBooksMessage }}
  </div>
   <div style="float:left;width: 100%;">{{ msg }}</div><br>
   <button @click="clickMsg" >按钮++</button>
   <button @click="clickMsgjj" >按钮--</button>
</template>

<style scoped>
 
</style>