如何在Vuejs的输入字段中输入值时显示错误消息？

Question

display: false,
  disply: false,
  methods() {
    getProductWeighInfo() {
      alert('gg');
      // if(){
      --
      else {} //
    },
  },

<input type="text" v-on:keypress="isNumber($event)" @blur="getProductWeighInfo()" />

<div>

  <div class="coil-weight-item">Preferred coil weight (Metric ton)</div>

  <ul class="message-show">

    <li v-on:click="displayMsg" @click="getPartingCharges('4')" :class="{ active: isActiveClass, }" class="product-list">5-10 </li>

    <li v-on:click="displayMessage" @click="getPartingCharges('10-22')" :class="{  active: isActiveClass,}" class="product-list">10-22 </li>

    <li v-on:click="displayMessage" @click="getPartingCharges('22-27')" :class="{  active: isActiveClass, }" class="product-list">22-27</li>



  </ul> <span v-if="display">parting charges will be applied</span>

  <span v-if="disply">No parting charges will be applied</span>

</div>

<div>

  <div class="coil-weight-item">Preferred coil weight (Metric ton)</div>

  <ul class="message-show">

    <li v-on:click="displayMsg" @click="getPartingColorCharges('4')" :class="{ active: isActiveClass, }" class="product-list">4 </li>

    <li v-on:click="displayMessage" @click="getPartingColorCharges('4-5')" :class="{  active: isActiveClass,}" class="product-list">4-5 </li>

    <li v-on:click="displayMessage" @click="getPartingColorCharges('5')" :class="{  active: isActiveClass, }" class="product-list">5</li>



  </ul> <span v-if="display">parting charges will be applied</span>

  <span v-if="disply">No parting charges will be applied</span>

</div>

我有两个 div 标签，其中一个 div 标签具有 (4,10-22,22-27) 和另一个 div 标签具有 (4,4-5,5) 值，如果用户输入以上提供的任何一个数字然后我需要显示一条简单的消息。喜欢收费，不收费。

在输入框中输入任意值，在输入框外点击，如何显示错误信息？