vue 消息显示几秒后隐藏

最新推荐文章于 2025-05-08 14:43:21 发布

顽石⚡

最新推荐文章于 2025-05-08 14:43:21 发布

阅读量9.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue js

本文链接：https://blog.youkuaiyun.com/sunfellow2009/article/details/83787034

vue 同时被 2 个专栏收录

64 篇文章

订阅专栏

29 篇文章

订阅专栏

本文介绍了一个使用Vue.js的表单验证实例，通过正则表达式检查输入的消息是否为空，并在消息为空时显示错误信息，1.5秒后自动隐藏。此功能涉及Vue的数据绑定、方法和计算属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

template

<template>
  <div id="anwser">
    <form @submit.prevent="submit" novalidate="true">
      <textarea name="" id="" cols="30" rows="10" maxlength="1000" autofocus required v-model="messages"></textarea>
      <div v-show="errorMessages" v-text="errorMessages" class="errorMessages">
      </div>
      <input class="submit" id="submitInput" type="submit" value="发送">
    </form>
  </div>
</template>

script

<script>
export default {
  data () {
    return {
      messages: '',
      errorMessages: ''
    }
  },
  computed: {
    currentFriend () {
      return this.$store.getters.currentFriend
    }
  },
  methods: {
    validMessages (messages) {
      // 匹配规则：任意字符 不能为空
      var re = /.+/
      return re.test(messages)
    },
    submit () {
      console.log('提交表单')
      // clearTimeout()
      let _this = this
      if (this.validMessages(this.messages)) {
        console.log(this.messages)
      } else {
        _this.errorMessages = '不能发送空白消息'
        setTimeout(function () {
          _this.errorMessages = ''
        }, 1500)
      }
    }
  }
}
</script>