介绍
监视 ref基本类型
例子
如下图，输入年龄不符合要求，会给出警告提示：
输入年龄校验：
- 不能是空
- 必须是整数
- 不能是负数、不能大于120岁
代码
html：
<template>
年龄： <input type="text" v-model="age" />
<span style="color: red;">{{ageWarn}}</span>
</template>
js：
<script lang="ts" setup name='Student'>
// 导入 watch
import { ref,watch } from 'vue'
// 年龄
let age = ref('')
// 年龄不符合要求给出的警告信息
let ageWarn = ref('')
watch(age,(newValue,oldValue)=>{
console.log("新值：",newValue,"---原值",oldValue)
console.log(typeof(newValue))
// 1. 判断空值
if(newValue === ''){
ageWarn.value = '请输入年龄'
return
}
// 2. 正则判断：是否全部为数字
const reg = /^\d+$/
if (!reg.test(newValue)) {
ageWarn.value = '请正确输入年龄'
return
}
// 转成number类型，判断是否超过最大值
let ageNum = Number(newValue)
console.log(ageNum,typeof(ageNum))
// 判断是否超过最大值
if(ageNum>120){
ageWarn.value = '年龄不能大于120岁'
}else{
ageWarn.value = ''
}
})
</script>
注意：监听属性必须存在，才能进行侦听
特点
- 当属性
age的值 改变时，才会触发执行age监视器函数 - 函数有两个形参，第一个形参是 新值，第二个形参是 原值