uniapp计算属性和监听属性的使用及props验证

发布时间 2023-04-20 20:03:41作者: prince11

计算属性:

定义: computed:{

变量名xx(){

return 计算的代码

}

}

 

使用: <p>乘以2的值为{{ 变量名xx() }}</p>

监听属性:

(普通监听:无法监听到第一次绑定的变化)

定义: watch: {

变量名xx (newName, oldName){

console.log(可以打印新老数据)

}

}

(普通监听:可监听到第一次绑定的变化)

定义:

<input type="text" v-model="userName"/>
watch: {
userName: {
handler (newName, oldName) {
console.log(newName)
},
immediate: true
}
}
(深度监听(可监听对象内属性变化))

watch: {
cityName: {
handler(newName, oldName) {
console.log(newName)
},
immediate: true,
deep: true
}
}

 

props验证

props: {
//通过“配置对象”的形式,来定义propB属性的“验证规则”
propB:{
type:String, //当前属性值必须是String字符串类型
required:true, //当前属性的值是必填项,如果使用者没指定propsB属性的值,则在终端进行警告提示
default:'张三' //如果使用者没有指定propB的值,则propB属性的默认值为 张三
}
}
一般只写类型和默认值