vue判断input值为空时，返回错误信息？

Question

如题，input为空的时候，不再dom上显示错误信息，这个是怎么回事？<div class="am-form-group err-name" id="form">                                    <label for="doc-ipt-3" class="am-u-sm-2 am-form-label"><strong>*</strong>资源名:</label>                                    <div class="am-u-sm-10">                                        <input type="text" @change="checkname" v-model="resourcesname" id="resourcesName" name="resourcesname">                                        <span class="err-plchod">{{errname}}</span>                                    </div>                                </div> var vm = new Vue({               el:"#form",               data:{                   url:'',                   resourcesname:'',                   sort:'',                   errname:'',                   masgurl:'',                   masgsort:'',                   isShow:false,                   resourcesModular:{                       "mk":"模块",                       "gn":"功能",                       "zy":"资源",                   },                   mydatas:[]               },               methods:{                 checkname:function(){                       if(this.resourcesname !=""){                               this.errname ="";                       }else{                          this.errname = "用户名不能为空";                       }                   },               }               });

Answer 1

我这边是有的，只不过是在input失去焦点之后出现的。

要想马上出现，可以使用watch

watch: {

    resourcesname: function (newval,oldval) {

      if (this.resourcesname != "") {

        this.errname = "";

      } else {

        this.errname = "用户名不能为空";

      }

    }

},

Answer 2

可以多绑定一个keyup事件，keyup事件在键盘按下后弹起时触发，而change是在失去焦点后才触发的

@keyup="checkname"