Vue.js 中如何判断对象是否存在属性

发布时间：2023-05-18

一、从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"属性，通过this.$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赋值为“暂无性别信息”。

推荐文章