Vue小白学习技巧

在前端输入框点击添加按钮，当输入框为空时，三种非常巧妙的方式

 

在标签的代码：

                                 

<button class="btn btn-primary" @click='add' >添加</button>

 

方式1.在点击事件中弹出一个对话框，来提醒
 

methods: {

            add:function(){

                if(!this.name) alert("请输入信息");

                this.lists.push({name:this.name,state:'0'});

                this.name='';

            }

        },

方式2：如果输入框的信息为空直接返回一个空的字符串

 methods: {
            add:function(){
                if(!this.name)
                return;
                this.lists.push({name:this.name,state:'0'});
                this.name='';
            }
        },

方式3.直接在标签中使用disabled属性  

<button class="btn btn-primary" @click='add' :disabled="!name">添加</button>