一、从JS判断对象属性是否存在
在使用Vue.js开发过程中,我们很可能需要判断一个对象是否存在某个属性。在JS中,可以使用in关键字来判断对象是否存在某个属性。
const obj = {
name: '张三',
age: 20,
gender: '男'
}
console.log('name' in obj); // true
console.log('address' in obj); // false
在上面的代码中,我们定义了一个对象obj,包含三个属性name、age、gender。使用in关键字,可以得知name属性存在于obj中,而address属性不存在于obj中。
二、判断对象中是否存在某个属性
在Vue.js开发中,我们需要判断一个对象是否存在某个属性。Vue提供了$set方法来做这件事情。
this.$set(target, key, value)
其中,target是要设置的对象,key是要设置的属性名,value是要设置的属性值。
举个例子:
data() {
return {
person: {
name: '张三',
age: 20
}
}
},
mounted() {
if (!this.person.hasOwnProperty('gender')) {
this.$set(this.person, 'gender', '男')
}
}
上面的代码中,我们在mounted生命周期函数中判断person对象是否存在gender属性,如果不存在,则通过$set方法给person对象添加了一个gender属性,值为“男”。
三、使用v-if进行判断
在Vue.js开发时,我们也可以使用v-if指令来判断某个属性是否存在。
<div v-if="person.gender">
{{ person.gender }}
</div>
<div v-else>
暂无性别信息
</div>
在上面的代码中,我们使用了v-if指令来判断person对象是否存在gender属性,如果存在,则输出gender的值,否则输出“暂无性别信息”。
四、使用$refs对元素进行操作
有时候我们需要对一个元素进行操作,但是该元素还未被渲染。这时,我们就需要用到$refs来判断该元素是否存在。
<template>
<div>
<input type="text" ref="myInput" v-model="keyword">
<button @click="handleClick">搜索</button>
</div>
</template>
<script>
export default {
data() {
return {
keyword: ''
}
},
methods: {
handleClick() {
if (this.$refs.myInput) {
this.$refs.myInput.focus()
}
}
}
}
</script>
在上面的代码中,我们给一个input元素添加了ref="myInput"属性,通过$refs.myInput来判断该元素是否存在。如果存在,则聚焦该元素,否则不做任何操作。
五、使用$watch监听属性变化
Vue.js还提供了一个$watch方法,可以监听一个对象的属性变化。当该属性变化时,$watch会自动执行相应的回调函数。通过监听属性变化,我们也可以判断一个对象是否存在某个属性。
export default {
data() {
return {
person: {
name: '张三',
age: 20
},
gender: ''
}
},
watch: {
'person.gender'(val, oldVal) {
if (!val) {
this.gender = '暂无性别信息'
} else {
this.gender = val
}
}
}
}
在上面的代码中,我们通过$watch方法监听了person.gender属性的变化。如果person.gender属性不存在,则会给this.gender赋值为“暂无性别信息”。