当前位置：首页 > news >正文

vue 判断一个属性值，如果是null或者空字符串或者是空格没有值的情况下，赋值为--

news 来源：原创 2025/5/18 9:58:01

在 Vue 中，可以通过多种方式来判断一个属性值是否为 null、空字符串或者仅包含空格，如果满足这些条件则将其赋值为 --。下面分别介绍在模板和计算属性、方法中实现的具体做法。

1. 在模板中直接判断

如果只需要在模板中对属性值进行显示处理，可以使用三元运算符来判断并赋值。

收起

vue

<template>
  <div>
    <!-- 判断 message 属性 -->
    <p>{{ message === null || message.trim() === '' ? '--' : message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '   ' // 这里可以修改为不同的值进行测试
    };
  }
};
</script>

2. 使用计算属性

如果需要多次使用这个处理逻辑，或者处理逻辑比较复杂，建议使用计算属性。

收起

vue

<template>
  <div>
    <!-- 显示处理后的 message -->
    <p>{{ processedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: null // 这里可以修改为不同的值进行测试
    };
  },
  computed: {
    processedMessage() {
      // 判断 message 是否为 null 或空字符串或仅包含空格
      return this.message === null || this.message.trim() === '' ? '--' : this.message;
    }
  }
};
</script>

3. 使用方法

如果希望在某些事件触发时动态处理属性值，可以使用方法。

收起

vue

<template>
  <div>
    <!-- 点击按钮时处理 message -->
    <button @click="processMessage">处理消息</button>
    <!-- 显示处理后的 message -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '' // 这里可以修改为不同的值进行测试
    };
  },
  methods: {
    processMessage() {
      // 判断 message 是否为 null 或空字符串或仅包含空格
      if (this.message === null || this.message.trim() === '') {
        this.message = '--';
      }
    }
  }
};
</script>

以上三种方式都可以实现判断属性值是否为 null、空字符串或者仅包含空格，并在满足条件时将其赋值为 -- 的功能。可以根据具体的需求选择合适的方式。