计算属性和侦听器

Mahe666

计算属性

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

const num = ref(0)

const squareNum = computed(() => {
  return num.value ** 2
})

const cubeNum = computed(() => {
  return num.value ** 3
})

</script>

<template>
  <button @click="num++">当前数字是 {{ num }}</button>
  <p>平方值为：{{ squareNum }}</p>
  <p>立方值为：{{ cubeNum }}</p>
</template>

<style scoped>

</style>

侦听器

示例如下，当我按下 HelloWorld 中最后的 d 字符时，才会弹出alert

<script setup>
import {ref, watch} from "vue";

const str = ref("")

watch(str, (newValue, oldValue) => {
  if (newValue === 'HelloWorld'){
    alert("mahe666")
  }
})

</script>

<template>
  <input type="text" v-model="str" />
</template>

<style scoped>

</style>