当我们需要判断用户输入的是否全是空格,或用户在不输入内容的情况下使用回车发送。此时我们如果需求内容不能为空,常规判断无法识别,空格本身也有length,这个时候就可使用到下列两种方式。
<template> <div class="box">content</div> </template> <script setup> import { ref, reactive, toRefs, watch, computed, defineProps, } from 'vue'; import { useStore } from 'vuex'; import { useRoute, useRouter } from 'vue-router'; const route = useRoute() const router = useRouter() const store = useStore() const data = reactive({ str: ' ' }) // 是否不存在 console.log(!data.str); // false // 长度 console.log(data.str.length);//8 // 是否不存在 console.log(!data.str.trim()); //true // 长度 console.log(data.str.trim().length); //0 // const { } = toRefs(data) </script> <style scoped lang="scss"></style>二、使用正则验证
<template> <div class="box">content</div> </template> <script setup> import { ref, reactive, toRefs, watch, computed, defineProps, } from 'vue'; import { useStore } from 'vuex'; import { useRoute, useRouter } from 'vue-router'; const route = useRoute() const router = useRouter() const store = useStore() const data = reactive({ str: ' ' }) let reg = new RegExp(/^[ ]*$/) // 堆代码 duidaima.com // 验证为全空,即无值 console.log(reg.test(data.str));//true // const { } = toRefs(data) </script> <style scoped lang="scss"></style>