在 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、空字符串或者仅包含空格，并在满足条件时将其赋值为 -- 的功能。可以根据具体的需求选择合适的方式。
