举一个使用get和set函数的计算属性计算count的例子

hamimelon2020

已于 2023-05-09 06:32:00 修改

阅读量79

点赞数

文章标签： javascript vue.js 前端

于 2023-05-08 20:46:52 首次发布

本文链接：https://blog.csdn.net/weixin_40945354/article/details/130566938

版权

<template>
  <div class="greetings">
  
  </div>
</template>

<script>
 import { ref, computed } from "vue"
 export default {
  name: "HelloWorld",
  setup() {
  const count = ref(4);
  const val = ref(0)
  const plusOne = computed({
  get: () => count.value + 1, 
  set: (val) => {
    count.value = val - 1
  },
})
console.log(val)
console.log(count)yon
console.log(plusOne)
console.log(count.value)
console.log(plusOne.value)
console.log(val.value)

return {
  count,
  val,
  plusOne
}
  }

  }

</script>



<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>

<template>
  <div class="greetings">
  
  </div>
</template>

<script>
 import { ref, computed } from "vue"

export default {
  setup() {
    const count = ref(1)

    const doubleCount = computed({
      get: () => count.value * 2,
      set: (value) => {
        count.value = value / 2
      },
    })

    console.log(doubleCount.value) // 输出2
    doubleCount.value = 6
    console.log(count.value) // 输出3

    return {
      count,
      doubleCount,
    }
  },
}

  

</script>



<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>

第一个更正为


<template>
  <div class="greetings">
  
  </div>
</template>

<script>
 import { ref, computed } from "vue"
 export default {
  name: "HelloWorld",
  setup() {
  const count = ref(1)
  const plusOne = computed({
  get: () => count.value + 1, 
  set: (value) => {
    count.value = value - 1
  },
})

console.log(count.value)
console.log(plusOne.value)


return {
  count,
  plusOne
}
  }

  }

</script>

<template>
  <div class="greetings">
  
  </div>
</template>

<script>
 import { ref, computed } from "vue"
 export default {
  name: "HelloWorld",
  setup() {
  const count = ref(1);
  const plusOne = computed({
    get: () => count.value + 1, 
    set: (value) => {
      count.value = value - 1
  },
})

console.log(plusOne.value);
console.log(count.value);

plusOne.value = 4
console.log(plusOne.value)

return {
  count,
  plusOne
}
  }

  }

</script>



<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>